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

Главная » Видеоуроки » JavaScript » 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 Комментариев

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Подписаться на рассылку

Будьте в курсе - получайте последние статьи на свой email

Ваша подписка успешно оформлена

Pin It on Pinterest

Share This