Angular. Жизненный цикл компонентов. Часть 2
Я возвращаюсь после долгого перерыва, связанного с моим переездом на Кипр. В этом видео я напомню о рассмотренных в прошло уроке методах жизненнго цикла компонентов, а также рассмотрим другие методы. К тому же мы разберем специальные декораторы для получения доступа к дочерник компонентам из родительского
В Angular присутствуют термины View и Content. Причем View зависит от контента. Content — это, что заключено между открывающимся и закрывающимся тэгом компонета. View включает себя шаблон компонента, в котором также может быть дочерний компонент с контентом. Для отображение контента в дочернем компоненте используется специальная директива ng-content. В angular есть хуки ngAfterViewInit, ngAfterViewChecked, ngAfterContent и ngAfterContentChecked для реагирования на инициализацию и проверки View и Content компонента.
Для доступа к дочернем компоненту используется декоратор @ViewChild(). Также можно получить доступ к контенту компонента при помощи декоратора @ContentChild().
Код урока (app.component.ts)
import { AfterContentChecked, AfterContentInit } from '@angular/core';
import { AfterViewInit, Component, ContentChild, ViewChild } from '@angular/core';
import { UserComponent } from './user/user.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit, AfterContentInit {
user = 'ang-app';
@ViewChild(UserComponent) userCmp: UserComponent | undefined;
@ContentChild(UserComponent) userCmpCnt: UserComponent | undefined;
changeUserName() {
this.user = 'Kamil Abzalov';
}
ngAfterViewInit(): void {
console.log(this.userCmp);
}
ngAfterContentInit() {
console.log(this.userCmpCnt);
}
}
Код урока (app.component.html)
<!-- View: шаблон + дочерки -->
<!-- Content (инициализируется до view) -->
<button (click)="changeUserName()">Change User name</button>
<app-user [user]="user">
<h1>Hello {{user}}</h1>
</app-user>Код урока (user.component.html)
{{user}}
{{admin}}
<ng-content></ng-content>
0 Комментариев