maxidebox@list.ru | +7 (929) 701 21 71
Связывание свойств и событий

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

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

Элемент, который использует внешнее свойство, должен содержать его описание и декоратор @Input():

	
import { Component, OnInit, Input } from '@angular/core';

export class ServerElementComponent implements OnInit {
  @Input() element: {type: string, name: string, content: string};
  //..
}
	

В данном примере связывается свойство (объект с ключами type, name, string) с переменной родительского компонента. Имя переменной в родительском компоненте в данном случае должно быть element.

В декоратор @Input() можно передать аргумент, который свяжет переменную с внешним именем:

	
@Input('srvElement') element: {type: string, name: string, content: string};
	

Это используется, когда родительский копонент передает данные дочернему компоненту, например, внутри *ngFor:

	
@Component({
  selector: 'app-parent',
  template: `
    <app-child *ngFor="let serverElement of serverElements" [srvElement]="serverElement">
    </app-child>
  `
})
	

Кастомные события

Компонент откуда всплывает событие:

	
import { Component, OnInit, EventEmitter, Output } from '@angular/core';

export class CockpitComponent implements OnInit {
  @Output() serverCreated = new EventEmitter<{serverName: string, serverContent:string}>();
  @Output() blueprintCreated = new EventEmitter<{serverName: string, serverContent:string}>();

  newServerName = '';
  newServerContent = '';

  onAddServer() {
    this.serverCreated.emit({serverName: this.newServerName, serverContent: this.newServerContent});
  }

  onAddBlueprint() {
    this.blueprintCreated.emit({serverName: this.newServerName, serverContent: this.newServerContent});
  }
}
	

Данный компонент выкидывает наружу объекты serverCreated и blueprintCreated.

Связывание объекта события в шаблоне родительского компонента:

	
<app-cockpit 
  (serverCreated)="onServerAdded($event)"
  (blueprintCreated)="onBlueprintAdded($event)">
</app-cockpit>
	

Синтаксис события (event)="method()" нужно писать в теге компонента, в котором event всплывает, method() это метод данного компонента.

Компонент приложения, в котором обрабатывается событие:

	
export class AppComponent {
    serverElements = [{type: 'server', name : 'fedora', content: 'secret'}];
    onServerAdded(serverData: {serverName: string, serverContent: string}) {
        this.serverElements.push({
            type: 'server',
            name: serverData.serverName,
            content: serverData.serverContent
        });
    }
    onBlueprintAdded(blueprintData: {serverName: string, serverContent: string}) {
        this.serverElements.push({
            type: 'blueprint',
            name: blueprintData.serverName,
            content: blueprintData.serverContent
        });
    }
}
	

Происходит следующее:

Внутренний компонент выкидывает наружу объект события, внешний компонент биндит к нему свой метод, который производит действия над объектом события.

Алиас (псевдоним события) может быть задан строковым аргументом декоратора @Output():

	
@Output('newName') serverCreated = new EventEmitter<{serverName: string, serverContent:string}>();
	

Голосов: 5 | Просмотров: 20

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

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

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

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

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

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