Как иметь несколько видов в одном компоненте в угловом2?

Question

Я новичок в Angular2, поэтому, пожалуйста, со мной.

У меня есть компонент, представляющий навигационную панель full-layout.component.ts. Элементы в навигационной панели принимаются с сервера (но для этого вопроса я буду жестко программировать).

Для каждого элемента есть связанный с ним связанный с ним объект routerLink, так что, когда пользователь нажимает на любой из элементов, он направляется на компонент с именем department.component.ts. В этом компоненте присутствует DepartmentService, который запрашивает http get() и возвращает массив строк.

В настоящее время, когда я нахожусь в full-layout.component.ts и нажимаю на любой предмет, он направляет меня туда отлично и показывает правильные данные. Но когда я пытаюсь щелкнуть другой элемент, он ничего не делает, и я не уверен, почему.

NB: Все элементы на панели навигации показывают список отделов с сервера.

Вот мой код:

ул состоят из моих деталей

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

Вы можете использовать параметр маршрута и ActivatedRoute в angular2

Modify в вашем полного layout.html, передавая имя в качестве параметра маршрута.

<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