Взаимодействие компонентов в Angular: inputs

Входные данные (или Inputs) предоставляют механизм, позволяющий родительскому компоненту привязывать свойства, к которым может иметь доступ дочерний компонент. При этом родительский компонент передает свойства дочернему компоненту.

Примечание: Этот мануал относится к версии Angular 2 и выше.

Просто определите в шаблоне родительского компонента привязки свойств по селектору дочернего компонента. Справа от знака равенства привязка должна содержать свойства из класса родительского компонента, которые вы хотите сделать доступными для дочернего компонента. Что касается названия самой привязки (оно идет слева от знака равенства), то его вы можете выбрать на ваше усмотрение. Давайте взглянем на шаблон родительского компонента story.component.html:

<selected-story [story]="currentStory" [character]="mainCharacter">
</selected-story>

А вот класс родительского компонента, story.component.ts:

export class StoryComponent {
  currentStory: string = 'The Fox Without a Tail';
  mainCharacter: string = 'Henry';
}

Теперь в дочернем компоненте импортируйте входные данные из @angular/code и определите их с помощью декоратора @Input. Это делается в классе дочернего компонента следующим образом:

import { Component, Input } from '@angular/core';

//...

Теперь дочерний компонент имеет доступ к значениям currentStory и mainCharacter из родительского компонента. Обратите внимание: для вызова свойства myCharacter в шаблоне дочернего компонента мы использовали псевдоним.

The story: {{ story }}
The character: {{ myCharacter }}

Читайте также: Коммуникация между компонентами в Angular

Tags:

Добавить комментарий