如何在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