Angular 2 — Хуки цикла приложения

Angular 2 — Хуки цикла приложения

От автора: в каждом приложении Angular циклы работают с задействованием полного набора процессов.

На следующей диаграмме показаны все процессы цикла приложения Angular 2.

Angular 2 — Хуки цикла приложения

Ниже приводится описание каждого этапа цикла приложения Angular.

ngOnChanges — когда изменяются значение свойств, связанных с данными, вызывается этот метод.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

ngOnInit — вызывается каждый раз при инициализации директивы / компонента после первого отображение Angular свойств, связанных с данными.

ngDoCheck – используется для определения и обработки изменений, которые сам Angular определить не может.

ngAfterContentInit — вызывается после того, как Angular ввел внешний контент в представление компонента.

ngAfterContentChecked — вызывается после того, как Angular начинает проверять контент, вводимый в компонент.

ngAfterViewInit – вызывается после того, как Angular инициализировал представления компонента и дочерние представления.

ngAfterViewChecked — вызывается после того, как Angular инициализировал представления компонента и дочерние представления.

ngOnDestroy – это фаза очистки непосредственно перед тем, как Angular удаляет все директивы / компоненты.
Ниже приведен пример реализации хука цикла приложения. Добавьте следующий код в файле app.component.ts

import { 
  Component 
} from '@angular/core'; 
 
@Component ({ 
  selector: 'my-app', 
  template: '<div> {{values}} </div> ' 
}) 
 
export class AppComponent { 
  values = ''; 
  ngOnInit() { 
 this.values = "Hello"; 
  } 
}

В приведенной выше программе мы вызываем хук цикла приложения ngOnInit, чтобы явно указать, что для параметра this.values должно быть установлено значение «Hello». После сохранения всех изменений в коде и обновления страницы браузера вы получите следующий результат.

Angular 2 — Хуки цикла приложения

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree