Angular. Жизненный цикл компонентов. Часть 2

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

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

Ваш адрес email не будет опубликован.

Pin It on Pinterest

Share This