Angular Learning befasst sich mit der Komponentenkommunikation und dem Komponentenlebenszyklus

In diesem Artikel erfahren Sie mehr über die Komponentenkommunikation und den Komponentenlebenszyklus in Angular und stellen Ihnen kurz die Methoden zur Datenübertragung innerhalb der Komponente und die Methode zur Datenübertragung nach außen vor an alle!

Komponentenkommunikation

---

1. Übergeben Sie Daten an das Innere der Komponente außerhalb der Attribute .

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

// favorite.component.ts
import { Input } from '@angular/core';
export class FavoriteComponent {
    @Input() isFavorite: boolean = false;
}

2. Komponente überträgt Daten nach außen

[] 表示绑定动态值，在组件内接收后是布尔类型，不加 [] 表示绑定普通值，在组件内接收后是字符串类型Anforderungen: Übergeben Sie Daten an die übergeordnete Komponente, indem Sie auf die Schaltfläche in der untergeordneten Komponente klicken

1. Montagephase

Die Lebenszyklusfunktion der Montagephase wird während der Montagephase nur einmal ausgeführt und bei der Aktualisierung der Daten nicht mehr ausgeführt.

1), Konstruktor

Angular wird beim Instanziieren der Komponentenklasse ausgeführt und kann zum Empfangen des von Angular injizierten Dienstinstanzobjekts verwendet werden.

---

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

2), ngOnInit
werden nach dem ersten Empfang des Eingabeattributwerts ausgeführt, wo die Anforderungsoperation ausgeführt werden kann.

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

export class FavoriteComponent {
  @Input("is-Favorite") isFavorite: boolean = false
}

<!-- 子组件模板 -->
<button (click)="onClick()">click</button>

3), ngAfterContentInit wird aufgerufen, wenn das erste Rendern der Inhaltsprojektion abgeschlossen ist.

// 子组件类
import { EventEmitter, Output } from "@angular/core"

export class FavoriteComponent {
  @Output() change = new EventEmitter()
  onClick() {
    this.change.emit({ name: "张三" })
  }
}

<!-- 父组件模板 -->
<app-favorite (change)="onChange($event)"></app-favorite>

4), ngAfterViewInit

Wird aufgerufen, wenn die Komponentenansicht gerendert wird.

// 父组件类
export class AppComponent {
  onChange(event: { name: string }) {
    console.log(event)
  }
}

export class ChildComponent {
  constructor (private test: TestService) {
    console.log(this.test) // "test"
  }
}

2, Aktualisierungsphase

1), ngOnChanges

wird ausgeführt, wenn sich der Eingabeattributwert ändert, und wird auch einmal während der anfänglichen Einstellung ausgeführt Egal wie viele Eingabeattribute sich gleichzeitig ändern, die Hook-Funktion wird nur einmal ausgeführt und der geänderte Wert wird gleichzeitig im Parameter gespeichert

Der Parametertyp ist SimpleChanges und die Untereigenschaft Typ ist SimpleChange

Für Basisdatentypen, solange sich der Wert ändert Erkannt

Für Referenzdatentypen kann die Änderung von einem Objekt zu einem anderen erkannt werden, Änderungen der Attributwerte im selben Objekt können jedoch erkannt werden kann nicht erkannt werden, wirkt sich jedoch nicht auf die Aktualisierungsdaten der Komponentenvorlage aus.

? Referenzdatentyp oder eine Referenz. Alle Eigenschaftsänderungen im Datentyp werden ausgeführt.

• 3), ngAfterContentChecked: Wird ausgeführt, nachdem die Aktualisierung der Inhaltsprojektion abgeschlossen ist.
  4), ngAfterViewChecked: Wird ausgeführt, nachdem die Komponentenansicht aktualisiert wurde.

• 3. Entladephase

• 1), ngOnDestroy
• wird aufgerufen, bevor die Komponente zerstört wird, und für Bereinigungsvorgänge verwendet.

  <app-child name="张三"></app-child>

  Weitere Programmierkenntnisse finden Sie unter: Programmiervideo
• ! !

Das obige ist der detaillierte Inhalt vonAngular Learning befasst sich mit der Komponentenkommunikation und dem Komponentenlebenszyklus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!