Angular Learning рассказывает о взаимодействии компонентов и жизненном цикле компонентов.

Компонентная связь

1. Передаем данные в компонент

<app-favorite [isFavorite]="true"></app-favorite>

// Favorite.comComponent.ts
импортировать {Ввод} из '@angular/core';
класс экспорта FavoriteComponent {
    @Input() isFavorite: boolean = false;
}

[Рекомендация по соответствующему руководству: «Урок по Angular»]

Примечание. Добавление [] вне атрибута означает привязку динамического значения. После получения его в компоненте это логический тип. Отсутствие [] означает привязку обычного значения. он в компоненте имеет字符串类型.

<app-favorite [is-Favorite]="true"></app-favorite>

import { Input } from '@angular/core';

класс экспорта FavoriteComponent {
  @Input("is-Favorite") isFavorite: boolean = false
}

2. Компоненту

необходимо передать данные наружу: передать данные родительскому компоненту, нажав кнопку в подкомпоненте

<!-- Шаблон подкомпонента-->
<button (click)="onClick()">click</button>

// Импорт класса подкомпонента { EventEmitter, Output } из "@angular/core"

класс экспорта FavoriteComponent {
  @Output() изменение = новый EventEmitter()
  onClick() {
    this.change.emit({ name: "Чжан Сан" })
  }
}

<!-- Шаблон родительского компонента -->
<app-favorite (change)="onChange($event)"></app-favorite>

// Класс экспорта класса родительского компонента AppComponent {
  onChange(событие: {имя: строка}) {
    console.log(событие)
  }
}

Жизненный цикл компонента

1. Фаза монтажа.

Функция жизненного цикла этапа монтажа выполняется только один раз во время этапа монтажа и больше не выполняется при обновлении данных.

1). Конструктор

Angular выполняется при создании экземпляра класса компонента и может использоваться для получения объекта экземпляра службы, внедренного Angular.

класс экспорта ChildComponent {
  конструктор (частный тест: TestService) {
    console.log(this.test) // "тест"
  }
}

2), ngOnInit

выполняется после первого получения значения входного атрибута, и здесь можно выполнить запрошенную операцию.

<app-child name="Zhang San"></app-child>

класс экспорта ChildComponent реализует OnInit {
  @Input("имя") имя: строка = ""
  ngOnInit() {
    console.log(this.name) // "Чжан Сан"
  }
}

3), ngAfterContentInit

вызывается после завершения первоначального рендеринга проекции контента.

<приложение-ребёнок>
	<div #box>Привет, Angular</div>
</app-child>

класс экспорта ChildComponent реализует AfterContentInit {
  Поле @ContentChild("box"): ElementRef<HTMLDivElement> не определено |

  ngAfterContentInit() {
    console.log(this.box) // <div>Привет, Angular</div>
  }
}

4), ngAfterViewInit

вызывается после визуализации представления компонента.

<!-- шаблон компонента app-child -->
<p #p>app-child работает</p>

класс экспорта ChildComponent реализует AfterViewInit {
  @ViewChild("p") p: ElementRef<HTMLParagraphElement> не определено |
  нгАфтервиевинит () {
    console.log(this.p) // <p>app-child работает</p>
  }
}

2. Фаза обновления

1), ngOnChanges

• выполняется при изменении значения входного атрибута, а также выполняется один раз во время первоначальной настройки. Порядок лучше, чем ngOnInit.

• Независимо от того, сколько входных атрибутов изменяется одновременно, функция перехвата будет работать. выполняется только один раз, и измененные значения будут сохранены одновременно. В параметрах

• тип параметра — SimpleChanges, а тип подсвойства — SimpleChange.

• Для базовых типов данных его можно обнаружить, пока. изменения значений

• . Для ссылочных типов данных он может обнаружить изменение одного объекта на другой, но обнаружение не может. Изменения значений свойств в одном и том же объекте не влияют на данные обновления шаблона компонента.

Изменение значений базового типа данных

<app-child [name]="name" [age]="age"></app-child>
<button (click)="change()">change</button>

класс экспорта AppComponent {
  name: string = "Чжан Сан";
  возраст: число = 20
  изменять() {
    this.name = "李思"
    this.age = 30
  }
}

Класс экспорта ChildComponent реализует OnChanges {
  @Input("имя") имя: строка = ""
  @Input("возраст") возраст: число = 0

  ngOnChanges (изменения: SimpleChanges) {
    console.log("Можно обнаружить изменения в значениях базовых типов данных")
  }
}

Изменение ссылочного типа данных

<app-child [person]="person"></app-child>
<button (click)="change()">change</button>

класс экспорта AppComponent {
  person = { name: "张三", возраст: 20 }
  изменять() {
    this.person = { name: "李思", возраст: 30 }
  }
}

Класс экспорта ChildComponent реализует OnChanges {
  @Input("person") person = { name: "", age: 0 }

  ngOnChanges (изменения: SimpleChanges) {
    console.log("Для ссылочных типов данных могут быть обнаружены только изменения в ссылочном адресе, изменения в атрибутах объекта не могут быть обнаружены")
  }
}

2), ngDoCheck: в основном используется для отладки, пока изменяются входные атрибуты, будь то базовый тип данных, ссылочный тип данных или изменение атрибута ссылочного типа данных, он будет выполнен.

3), ngAfterContentChecked: выполняется после завершения обновления проекции контента.

4), ngAfterViewChecked: выполняется после обновления представления компонента.

3. Фаза удаления

1), ngOnDestroy

вызывается перед уничтожением компонента и используется для операций очистки.

класс экспорта HomeComponent реализует OnDestroy {
  ngOnDestroy() {
    console.log("Компонент удален")
  }
}