Heim > Artikel > Web-Frontend > Eine kurze Diskussion über die Interaktionsmethoden von Angular-Komponenten
In diesem Artikel erfahren Sie mehr über die Interaktionsmethoden von Angular-Komponenten. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Winkelkomponenteninteraktion
Komponenteninteraktion: Komponentenkommunikation ermöglicht es zwei oder mehr Komponenten, Informationen auszutauschen.
Verwendungsszenarien: Wenn eine bestimmte Funktion in mehreren Komponenten verwendet wird, kann die spezifische Funktion in einer Unterkomponente gekapselt werden und bestimmte Aufgaben oder Arbeitsabläufe können in der Unterkomponente verarbeitet werden.
Interaktionsmethoden:
@Input
und @Output
. @Input
和@Output
装饰器进行交互。服务
service
. Empfohlene verwandte Tutorials: „angular Tutorial
“Übertragen Sie Daten von der übergeordneten Komponente zur untergeordneten Komponente.
Übertragen Sie Daten von der übergeordneten Komponente zur untergeordneten Komponente durch Eingabebindung.
Die Eingabeeigenschaft ist eine einstellbare Eigenschaft mit dem @Input-Dekorator.
import { Component, Input } from '@angular/core'; @Component({ selector: 'app-selector', template: ` // 模板代码 ` }) export class TestComponent { @Input() hero: Hero; @Input('master') masterName: string; }Das obige Beispiel enthält zwei Eingabeattribute. Das zweite @Input gibt einen Alias-Master für den Attributnamen masterName der Unterkomponente an. Referenzieren Sie die untergeordnete Komponente in der übergeordneten Komponente. Einige Codebeispiele lauten wie folgt:
<app-hero-child *ngFor="let hero of heroes" [hero] = "hero" [master] = "master"> </app-hero-child>
Überwachen Sie Änderungen in den Eingabeattributwerten.
(1) Verwenden Sie die Setter-Methode.
Verwenden Sie die setter()-Methode eines Eingabeattributs hat die Wertänderungen in der übergeordneten Komponente abgefangen und Maßnahmen ergriffen. Einige Codebeispiele lauten wie folgt:export class TestComponent { @Input() set name(name: String) { // 逻辑处理 } }(2) Verwenden Sie die ngOnChanges()-Methode
Verwenden Sie die ngOnChanges()-Methode der OnChanges-Lebenszyklus-Hook-Schnittstelle, um auf Änderungen in Eingabeattributwerten zu warten und zu reagieren . Hinweis:
import { Component, Input, OnChanges, SimpleChange } from '@angular/core'; @Component({ selector: 'app-version-child', template: ` // 模板代码 ` }) export class ChildComponent implements OnChanges { @Input() major: number; @Input() minor: number; ngOnChanges(changes: { [propKey: string]: SimpleChange }) { for (let propName in changes) { // propName为输入属性的名字 let changedProp = changes[propName]; // changedProp为SimpleChange对象 // 其它代码 } } }SimpleChange-KlasseDer Quellcode lautet wie folgt:
/** * Represents a basic change from a previous to a new value for a single * property on a directive instance. Passed as a value in a * {@link SimpleChanges} object to the `ngOnChanges` hook. * * @see `OnChanges` * * @publicApi */ export declare class SimpleChange { previousValue: any; currentValue: any; firstChange: boolean; constructor(previousValue: any, currentValue: any, firstChange: boolean); /** * Check whether the new value is the first value assigned. */ isFirstChange(): boolean; }
Die übergeordnete Komponente lauscht auf die Ereignisse der untergeordneten Komponente
Die untergeordnete Komponente stellt ein EventEmitter-Attribut bereit. Wenn ein Ereignis auftritt, verwendet die untergeordnete Komponente diese Eigenschaft, um das Ereignis (nach oben) auszusenden. Die übergeordnete Komponente bindet an diese Ereigniseigenschaft und reagiert, wenn das Ereignis auftritt.
Übergeordnete Komponente und untergeordnete Komponente kommunizieren über Dienste.
Übergeordnete Komponente und ihre untergeordnete Komponente nutzen denselben Dienst und nutzen diesen Dienst, um eine bidirektionale Kommunikation innerhalb der Komponentenfamilie zu erreichen. Der Umfang dieser Dienstinstanz ist auf die übergeordnete Komponente und ihre untergeordneten Komponenten beschränkt. Komponenten außerhalb dieses Komponentenunterbaums können nicht auf den Dienst zugreifen oder mit ihnen kommunizieren.Weitere Programmierkenntnisse finden Sie unter: Programmiervideo
! ! 🎜Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Interaktionsmethoden von Angular-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!