maxidebox@list.ru | +7 (929) 701 21 71
Навигация. Передача данных событиями

Навигация. Передача данных событиями

Навигация

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

	
<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, для отображения компонента или заглушки.

Голосов: 34 | Просмотров: 46

Заявка на создание сайта / Продвижение сайта

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

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

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

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

Закажите сайт по телефону: +7 (929) 701 21 71