меню

Навигация

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

  
<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():

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

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

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

Передача данных событиями

EventEmitter может не возвращать значение:

  
@Output() selectedItem = new EventEmitter<void>();
  

В app-recipe-item по клику срабатывает this.selectedItem.emit(), который не передает данных, а просто сообщает о факте события. В родительском компоненте app-recipe-list это обрабатывается так:

 
<app-recipe-item
  *ngFor="let recipeEl of recipes"
  [recipe]="recipeEl"
  (selectedItem)="onRecipeSelect(recipeEl)">
</app-recipe-item>
 

В компоненте app-recipe-list методом onRecipeSelect(recipeEl) выбрасывается объект события recipeWasSelected, в котором находится объект выбранного рецепта. И в вышестоящем компоненте это обрабатывается так:

 
<div class="row">
  <div class="col-md-5">
    <app-recipe-list
    (recipeWasSelected)="selectedRecipe = $event"></app-recipe-list>
  </div>
  <div class="col-md-7">
    <app-recipe-detail
    *ngIf="selectedRecipe; else infoText"
    [recipe]="selectedRecipe"
    ></app-recipe-detail>
    <ng-template #infoText>
      <p>Please, select the item

 

</ng-template> </div> </div>

Таким образом событию можно назначать не только метод, но и сразу присвоить переменной компонента переменную события, а так же пользоваться конструкцией *ngIf else, для отображения компонента или заглушки.


Возможно, вам будет интересно

Связывание свойств и событий

Создание кастомных событий и их обработчиков. Импорт свойств родительского компонента.

Сервисы

Централизация логики и упрощение коммуникации между компонентами с помощью сервисов.

Route. Защита роутера

Использование интерфейсов CanActivate и CanActivateChild для принятия решения об активации роутера

Создание компонентов в Angular

Компоненты ключевая особенность Angular. Приложение строится из компонентов.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту