31
Июл
2019

Компоненты

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

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

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

(untitled)


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

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

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

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

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


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

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

Getter и Setter

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

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


    @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”.

Share

Тебе может это понравится...