Angular 9 на базе TypeScript — популярная платформа для создания динамических веб-приложений. В этой статье мы рассмотрим некоторые важные методы Angular 9 с использованием TypeScript, предоставив разговорные объяснения и практические примеры кода, которые помогут вам повысить уровень своих навыков Angular.

1. ngOnInit():
   Метод ngOnInit() — это перехватчик жизненного цикла, который выполняется после инициализации компонента. Он обычно используется для задач инициализации, таких как получение данных с сервера или настройка подписок.

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  ngOnInit(): void {
    // Initialization logic goes here
  }
}

1. ngOnDestroy():
   Метод ngOnDestroy() — это еще один крючок жизненного цикла, который вызывается непосредственно перед уничтожением компонента. Это полезно для очистки ресурсов, например для отказа от подписки или отмены текущих HTTP-запросов.

import { Component, OnDestroy } from '@angular/core';
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnDestroy {
  ngOnDestroy(): void {
    // Cleanup logic goes here
  }
}

1. ngOnChanges():
   Метод ngOnChanges() — это перехватчик жизненного цикла, который вызывается всякий раз, когда изменяются входные свойства компонента. Вы можете использовать его, чтобы реагировать на изменения и выполнять действия на основе новых значений.

import { Component, OnChanges, Input } from '@angular/core';
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnChanges {
  @Input() data: any;
  ngOnChanges(): void {
    // React to input property changes
  }
}

1. ngIf и ngFor:
   Директивы ngIf и ngFor сами по себе не являются методами, но они необходимы в Angular 9 для условного рендеринга элементов и перебора коллекций соответственно.

<div *ngIf="showElement">This element is conditionally shown.</div>
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

1. ngOnInit против конструктора:
   Метод ngOnInit() часто путают с конструктором. Хотя конструктор используется для базовой инициализации и внедрения зависимостей, ngOnInit() специально разработан для задач инициализации, которые зависят от входных свойств компонента и выполняются после конструктора.

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  constructor() {
    // Initialization logic that does not depend on input properties
  }
  ngOnInit(): void {
    // Initialization logic that depends on input properties
  }
}

В этой статье мы рассмотрели некоторые важные методы Angular 9 с использованием TypeScript. Освоив эти методы и поняв их назначение, вы получите прочную основу для создания мощных и динамичных веб-приложений с помощью Angular 9. Удачного программирования!