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

Компоненты

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

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

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

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

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

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

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

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

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

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

Getter и Setter

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

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

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

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

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

contacts-list.component.ts

1
2
3
4
5
6
7
8
9
@Component({
  selector: 'contacts-list',
  template: `
    <contacts-item [name]="'Peter'"></contacts-item>
  `,
})
export class ContactsListComponent {
  contactPerson: string
}

contacts-item.component.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@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.

Ссылки

Комментарии