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

Компоненты

Компонент (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.

Ссылки

Комментарии