Перейти к содержанию

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

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

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