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

Компоненты

Компонент (Angular component) - обособленная часть функционала со своей логикой, HTML-шаблоном и CSS-стилями.

Класс становится Angular компонентом, если его объявлению предшествует декоратор @Component() с объектом конфигурации.

Декораторы Angular @Input() и @Output()

<contacts-item [name]="contactPerson" (saveContactPerson)="contactPerson = $event"></contacts-item>

Ранее уже упоминалось, что Angular компоненты могут принимать и передавать данные.

Здесь name и saveContactPerson - входное и выходное свойства ContactsItemComponent. Тип задается с помощью декораторов @Input() и @Output() соответственно.

Исходя из названия, входными (@Input()) свойствами считаются те, которые принимают данные, а выходными (@Output()) - которые поставляют данные, это экземпляры класса EventEmitter.

В качестве альтернативы в Angular component можно использовать свойства декоратора @Component() inputs и outputs.

    @Component({
      selector: 'contacts-item',
      template: `<button (click)= "showContactPerson()">Show</button>`,
      inputs: ['name'],
      outputs: ['saveContactPerson']
     })

Но нельзя использовать оба варианта одновременно.

Getter и Setter

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

Getter вызывается в момент обращения к свойству (в шаблоне или в других методах классах), setter - в момент присвоения ему значения (обычно это свойства с декоратором @Input()).

    @Input() _name: string = null;
    get name(): string { return this._name || 'Unknown'; }

Запись означает, что при обращении к свойству с именем name будет вызван одноименный метод с ключевым словом get.

Setter создается с помощью set. Он не должен возвращать значений и обязательно принимает в качестве единственного аргумента исходное значение.

contacts-list.component.ts

@Component({
  selector: 'contacts-list',
  template: `
    <contacts-item [name]="'Peter'"></contacts-item>
  `
})
export class ContactsListComponent {
  contactPerson: string
}

contacts-item.component.ts

@Component({
  selector: 'contacts-item',
  template: `
    <p>{{ name }}</p>
  `
})
export class ContactsItemComponent {
  _name: string = null

  @Input() set name(value: string) {
    this._name = value + '*'
  }

  get name(): string {
    return this._name || 'Unknown'
  }
}

В компоненте ContactsItemComponent определено строковое свойство _name, которое участвует в формировании name.

Свойства, определенные в Angular компоненте с помощью сеттеров и геттеров, не должны дублироваться в "обычных" свойствах, поэтому в примере выше используется название с нижним подчеркиванием.

В ContactsListComponent задается значение name компонента ContactsItemComponent. Именно в этот момент вызывается метод set() и устанавливает значение в Peter*.

В самом компоненте после интерполяции вызывается метод get(), который возвращает Unknown, если _name равно null.

То есть если бы в ContactsListComponent шаблон был <contacts-item></contacts-item>, то значением name было бы Unknown.