Навигация

Главный копонент обрабатывает событие клика по навигации:

<app-header (selectItem)="onSelectItem($event)"></app-header>

Код обрабочика:

selectedItem: string = 'recipes';

onSelectItem(item: string) {
this.selectedItem = item;
}

И в зависимости от данного состояния отображает компоненты:

<app-recipes *ngIf="selectedItem === 'recipes'"></app-recipes>
<app-shopping-list *ngIf="selectedItem === 'shopping-list'"></app-shopping-list>

Шаблон навигации привязывает клики к своему методу selectFromMenu():

<li><a href="#" (click) = "selectFromMenu('recipes')">Recipes</a></li>
<li><a href="#" (click) = "selectFromMenu('shopping-list')">Shopping List</a></li>

Метод selectFromMenu выводит наружу объект EventEmitter:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
//...
@Output() selectItem = new EventEmitter<string>();

selectFromMenu(item: string) {
this.selectItem.emit(item);
}

Таким образом, когда происходит клик по навигации, всплывает событие selectItem, которое обрабатывает главный компонент и отображает соответствующий компонент.

Редактировать на GitHub