меню

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

Элемент, который использует внешнее свойство, должен содержать его описание и декоратор @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}>();
  

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

Route передача статичных данных

Как передать статичные данные в компонент с помощью настроек роута.

JavaScript операторы

JavaScript операторы, которые важно знать для работы с Angular

Компонент и данные

В данном руководстве пойдет речь о селекторе, Databinding, интерполяции, связывание свойств и многом другом.

Сервисы

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

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

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

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

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

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

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

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