Angular. Взаимодействие компонентов
Сегодня мы рассмотрим взаимодействие между родительским и дочерним Angular компонентами. Компоненты из разных уровней вложенности могут взаимодействовать через сервис (мы поговорим об этом в следующих уроках).
Для взаимодействия родительского и дочернего компонента мы должны использовать встроенные декораторы — @Input() и @Output(). С помощью @Input() декоратора описываются входные свойства компонента (от родительского к дочернему). @Output свойства — это EventEmitter() — события, которые передаются на уровень вверх при помощи метода emit().
Также мы обсудим ссылки на html элемент в Angular шаблонах компонента. Ссылка на элемент указывается как #elemLink (см. код урока)
Код урока (app.component.html)
User info: {{user}}
<br><br>
Enter user name
<input type="text" #newUserName (input)="setNewUserName(newUserName.value)">
<br><br>
<hr>
<app-user [value]="user" (valueChanged)="user = $event"></app-user>Код урока (app.component.ts)
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
user = 'Kamil Abzalov';
setNewUserName(newUserName: string) {
this.user = newUserName;
}
}
Код урока (user.component.html)
User param in User component: {{value}}
<input type="text" #userName (input)="setNewUserName(userName.value)">Код урока (user.component.ts)
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent {
@Input()
value = '';
@Output()
valueChanged = new EventEmitter<string>();
setNewUserName(newUserName: string) {
this.valueChanged.emit(newUserName);
}
}
0 Комментариев