如何在angular2中的一个组件中有多个视图

Question

我有一个代表导航栏的组件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

可以在angular2中使用route参数和ActivatedRoute

通过将名称作为路由参数传递来修改您的 full-layout.html。

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

在您的 app-departments 中访问参数

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