Angular Learning befasst sich mit der Komponentenkommunikation und dem Komponentenlebenszyklus

Komponentenkommunikation

1. Übergeben Sie Daten an die Komponente

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

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

[Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]

Hinweis: Das Hinzufügen von [] außerhalb des Attributs bedeutet, dass ein dynamischer Wert nach dem Empfang in der Komponente gebunden wird. Wenn kein [] hinzugefügt wird, wird ein normaler Wert gebunden es in der Komponente ist字符串类型.

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

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

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

2. Die Komponente

muss Daten nach außen übertragen: Übergeben Sie die Daten an die übergeordnete Komponente, indem Sie in der Unterkomponente auf die Schaltfläche

<!-- Sub-component template-->

<button (click)="onClick()">click</button>

// Unterkomponentenklassenimport { EventEmitter, Output } aus „@angular/core“

Klasse FavoriteComponent { exportieren
  @Output() change = new EventEmitter()
  onClick() {
    this.change.emit({ name: „Zhang San“ })
  }
}

<!-- Vorlage für übergeordnete Komponente -->
<app-favorite (change)="onChange($event)"></app-favorite>

// Exportklasse der übergeordneten Komponentenklasse AppComponent {
  onChange(event: { name: string }) {
    console.log(Ereignis)
  }
}

Komponentenlebenszyklus

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) Der Konstruktor

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

Klasse ChildComponent { exportieren
  Konstruktor (privater Test: TestService) {
    console.log(this.test) // „test“
  }
}

2) ngOnInit

wird nach dem ersten Empfang des Eingabeattributwerts ausgeführt und der angeforderte Vorgang kann hier ausgeführt werden.

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

Exportklasse ChildComponent implementiert OnInit {
  @Input("name") Name: string = ""
  ngOnInit() {
    console.log(this.name) // „Zhang San“
  }
}

3) ngAfterContentInit

wird aufgerufen, nachdem das erste Rendern der Inhaltsprojektion abgeschlossen ist.

<app-child>
	<div #box>Hallo Angular</div>
</app-child>

Exportklasse ChildComponent implementiert AfterContentInit {
  @ContentChild("box") Feld: ElementRef<HTMLDivElement> |

  ngAfterContentInit() {
    console.log(this.box) // <div>Hallo Angular</div>
  }
}

4) ngAfterViewInit

wird aufgerufen, nachdem die Komponentenansicht gerendert wurde.

<!-- App-Child-Komponentenvorlage -->
<p #p>app-child funktioniert</p>

Exportklasse ChildComponent implementiert AfterViewInit {
  @ViewChild("p") p: ElementRef<HTMLParagraphElement> |
  ngAfterViewInit () {
    console.log(this.p) // <p>app-child funktioniert</p>
  }
}

2. Aktualisierungsphase

1), ngOnChanges

• wird ausgeführt, wenn sich der Eingabeattributwert ändert, und wird auch einmal während der anfänglichen Einstellung ausgeführt. Die Reihenfolge ist besser als bei ngOnInit

• , die Hook-Funktion wird dies tun Wird nur einmal ausgeführt und die geänderten Werte werden gleichzeitig gespeichert. In den Parametern

• ist

• der Parametertyp SimpleChanges und der Untereigenschaftstyp SimpleChange

• Bei Referenzdatentypen können Änderungen von einem Objekt zu einem anderen erkannt werden, die Erkennung kann jedoch keine Auswirkungen auf die Aktualisierungsdaten der Komponentenvorlage haben

• .

Grundlegende Datentypwertänderungen

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

Exportklasse AppComponent {
  Name: string = „Zhang San“;
  Alter: Anzahl = 20
  ändern() {
    this.name = "李思"
    this.age = 30
  }
}

Exportklasse ChildComponent implementiert OnChanges {
  @Input("name") Name: string = ""
  @Input("age") Alter: Zahl = 0

  ngOnChanges(changes: SimpleChanges) {
    console.log("Änderungen in grundlegenden Datentypwerten können erkannt werden")
  }
}

Änderung des Referenzdatentyps

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

Exportklasse AppComponent {
  person = { Name: „张三“, Alter: 20 }
  ändern() {
    this.person = { Name: „李思“, Alter: 30 }
  }
}

Exportklasse ChildComponent implementiert OnChanges {
  @Input("person") person = { name: "", age: 0 }

  ngOnChanges(changes: SimpleChanges) {
    console.log("Bei Referenzdatentypen können nur Änderungen in der Referenzadresse erkannt werden, Änderungen in Objektattributen können nicht erkannt werden")
  }
}

2), ngDoCheck: Wird hauptsächlich zum Debuggen verwendet. Solange sich die Eingabeattribute ändern, unabhängig davon, ob es sich um einen Basisdatentyp, einen Referenzdatentyp oder eine Attributänderung in einem Referenzdatentyp handelt, wird es 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. Deinstallationsphase

1), ngOnDestroy

wird vor der Zerstörung der Komponente aufgerufen und für Bereinigungsvorgänge verwendet.

Die Exportklasse HomeComponent implementiert OnDestroy {
  ngOnDestroy() {
    console.log("Komponente wurde deinstalliert")
  }
}