angle2の1つのコンポーネントに複数のビューを表示するにはどうすればよいですか？

Question

私はAngular2を初めて使うので、私と一緒に裸にしてください。

私はナビゲーションバーを表すコンポーネントを持っていますfull-layout.component.tsです。ナビゲーションバーの項目はサーバーから受信されます（ただし、この質問の目的では、ハードコードします）。

各アイテムにはrouterLinkが関連付けられているため、ユーザーがいずれかのアイテムをクリックすると、department.component.tsというコンポーネントが表示されます。このコンポーネントには、http get()が文字列の配列を要求して返すように提供されるDepartmentServiceがあります。

現在、私がfull-layout.component.tsに入っていて、アイテムをクリックすると、そこに私を完全に誘導し、正しいデータが表示されます。しかし、私がそこから別のアイテムをクリックしようとすると、何もしないし、なぜわからないのですか。

NB：ナビゲーションバーのすべての項目には、サーバーからの部門のリストが表示されます。ここで

は私のコードです：

ULは私の項目

full-layout.component.html

<ul class="nav-dropdown-items"> 
    <li class="nav-item" *ngFor="let item of dropDownItems"> 
    <a #clicked class="nav-link" routerLinkActive="active" [routerLink]="[item.routerLink]" (click)="send(item.name)" > 
     <i class="icon-puzzle"></i>{{item.name}} 
    </a> 
    </li> 
</ul> 

full-layout.component.ts

@Component({ 
    selector: 'app-dashboard', 
    templateUrl: './full-layout.component.html', 
    providers: [SharedService] 
}) 
export class FullLayoutComponent implements OnInit { 
    service; 

    constructor(service: SharedService) { this.service = service; } 
    ngOnInit() {} 

    send(str) { this.service.saveData(str); } 

    dropDownItems = [{ 
     routerLink: '/components/departments', 
     name: 'Artshums' 
    }, 
    { 
     routerLink: '/components/departments', 
     name: 'Dentistry' 
    }, 
    { 
     routerLink: '/components/departments', 
     name: 'Law' 
    }, 
    { 
     routerLink: '/components/departments', 
     name: 'IOPPN' 
    }, 
    { 
     routerLink: '/components/departments', 
     name: 'LSM' 
    }, 
    { 
     routerLink: '/components/departments', 
     name: 'NMS' 
    }, 
    { 
     routerLink: '/components/departments', 
     name: 'Nursing' 
    }, 
    { 
     routerLink: '/components/departments', 
     name: 'SSPP' 
    }, 
    { 
     routerLink: '/components/departments', 
     name: 'Health' 
    } 
    ]; 
} 

から成り

departments.component.ts

@Component({ 
    selector: 'app-departments', 
    templateUrl: './departments.component.html', 
    providers: [DepartmentsService] 
}) 
export class DepartmentsComponent implements OnInit { 
    router; service; myName; _faculty: Faculty; 

    constructor(service: SharedService, private departmentsService: DepartmentsService) { 
    this.service = service; 
    this.myName = service.getData(); 
    } 

    ngOnInit() { 
    console.log(this.myName); 
    this.departmentsService.getData(this.myName).then(
     (faculties: Faculty) => this._faculty = faculties 
    ); 
    } 
} 

departments.service.ts

@Injectable() 
export class DepartmentsService { 
    constructor(
    private http: Http 
) {} 

    getData(facultyName): Promise <any> { 
    return this.http.get('/admin/faculty/' + facultyName).toPromise().then(response => response.json()).catch(DepartmentsService.handleError); 
    } 
} 

departments.component.html

<ul class="departments-box" *ngFor="let fac of _faculty"> 
    <li *ngFor="let dep of fac.Departments"> 
    {{dep}} 
    </li> 
</ul> 

質問

どうすればいいですか？ユーザーがいずれかのアイテムにいるとき、正しい情報と更新ビューが表示されるはずですか？

Answer 1

あなたは、ルートパラメータとして名を渡すことで、あなたのフルlayout.htmlにangular2

変更にルートパラメータとActivatedRouteを使用することができます。

<a #clicked class="nav-link" routerLinkActive="active" [routerLink]=" 
      [item.routerLink,item.name]"> 

あなたアプリ-部門のアクセスパラメータ

import { ActivatedRoute } from '@angular/router' 

departmentName: string = ""; // used for the route parameter. 

constructor(private route: ActivatedRoute,.....) { 
    this.departmentName= route.snapshot.params.name; 

    } 

ngOnInit(){ 
    this.departmentsService.getData(this.myName).then(
     (faculties: Faculty) => this._faculty = faculties 
    ); 
} 

として、ルーティングのURLは、あなたが取得しているエラーが何であるかを

/components/departments/:name