如何在angular2中的一個組件中有多個視圖？

Question

我是Angular2的新手，所以請和我一起裸照。

我有一個組件代表導航欄full-layout.component.ts。導航欄中的項目是從服務器接收的（但爲了這個問題，我會硬編碼）。

對於每個項目都有一個與其關聯的routerLink，這樣當用戶點擊任何項目時，它將被導向一個名爲department.component.ts的組件。在這個組件中，提供了一個DepartmentService，它使http get()請求並返回一個字符串數組。

目前，當我在full-layout.component.ts並點擊任何項目，它指示我那裏完美，並顯示正確的數據。但是當我嘗試點擊另一個項目時，它不會執行任何操作，我不知道爲什麼。

注意：導航欄中的所有項目顯示服務器中的部門列表。

這裏是我的代碼：

了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使用路由參數和ActivatedRoute在angular2

修改。

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

訪問參數在APP-部門作爲

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 
    ); 
} 

你的路由網址應修改爲

/components/departments/:name