So implementieren Sie die Komponenteninteraktion in Angular2

In diesem Artikel wird hauptsächlich die Methode zur Implementierung der Komponenteninteraktion in Angular2 vorgestellt und die zugehörigen Betriebstechniken und Vorsichtsmaßnahmen für die Komponenteninteraktion in Angular2 in Form von Beispielen zusammengefasst und analysiert

Die Beispiele in diesem Artikel beschreiben die Methode von Angular2 zur Implementierung der Komponenteninteraktion. Teilen Sie es wie folgt als Referenz mit allen:

Vorwort

In der Angular-Entwicklung beziehen wir beispielsweise häufig die Interaktion zwischen Komponenten ein , wir verweisen auf Komponenten, die von unserer eigenen Abteilung entwickelt wurden
Manchmal müssen wir einige Daten an die referenzierte Komponente binden, oder wir benötigen die referenzierte Unterkomponente, um einige Daten auszugeben
Zu diesem Zeitpunkt müssen wir mit dem umgehen Beziehung zwischen den Komponenten. Interaktion zwischen

Schlüsselcode für Komponenteninteraktion

Übergeordnete Komponente bindet Daten an untergeordnete Komponente

Unterkomponente

<h3>{{hero.name}} says:</h3>
@Input() hero: Hero;

Übergeordnete Komponente

<hero-child [hero]="myhero" ></hero-child>
myhero = "Mr.IQ";

Der @Input der Unterkomponente gibt hier an, dass sie den Entitätshelden benötigt. Später, wenn die übergeordnete Komponente die Unterkomponente einführt, muss dies der Fall sein Geben Sie hero ein und weisen Sie hero in Ihrer eigenen Komponente einen Wert zu, um die Datenbindung der übergeordneten Komponente an die untergeordnete Komponente zu realisieren.

Die übergeordnete Komponente lauscht auf die Ereignisse der Untergeordnete Komponente

Die untergeordnete Komponente

<button (click)="vote(true)" >Agree</button>
@Output() onVoted = new EventEmitter<boolean>();
vote(agreed: boolean) { this.onVoted.emit(agreed);}

Übergeordnete Komponente

<my-voter (myonVoted)="onVoted($event)"></my-voter>
myonVoted(agreed: boolean) { agreed ? this.agreed++ : this.disagreed++; }

Der @Output der untergeordneten Komponente gibt an, dass sie die onVoted-Methode verwendet, um einen booleschen Wert zu übergeben Nachdem die übergeordnete Komponente die untergeordnete Komponente eingeführt hat, bindet sie die Methode der untergeordneten Komponente. Durch die Verwendung Ihrer eigenen Methode können Sie den Effekt der Überwachung von Unterkomponenten erzielen

Setter zum Abfangen Änderungen in Eingabeattributwerten

Unterkomponente

<h3>"{{name}}"</h3>
private _name = &#39;&#39;;
@Input()
set name(name: string) { this._name = (name && name.trim()) || &#39;<no name set>&#39;; }
get name(): string { return this._name; }

Übergeordnete Komponente

<name-child [name]="myname"></name-child>

Nachdem die übergeordnete Komponente auf die Unterkomponente verweist, bindet sie Daten an die Unterkomponente. Komponente. Die Unterkomponente ändert und zeigt die von der übergeordneten Komponente über set und get übergebenen Daten an.

Die übergeordnete Komponente und die untergeordneten Komponenten interagieren über lokale Variablen

Untergeordnete Komponente

seconds = 11;
stop() { this.message = `Holding at T-${this.seconds} seconds`;  }

Übergeordnete Komponente

<button (click)="timer.stop()">Stop</button>
<p class="seconds">{{timer.seconds}}</p>
<countdown-timer #timer></countdown-timer>

Die untergeordnete Komponente definiert Variablen und Methoden. Nachdem die übergeordnete Komponente auf das Tag der untergeordneten Komponente verwiesen hat, übergeben Sie eine lokale Variable im Tag, um die Unterkomponente darzustellen, und verwenden Sie sie dann die Variable, um auf die Variablen und Methoden der Unterkomponente zuzugreifen

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie orderBy-Sortierung und Fuzzy-Abfrage in Angular

vue vuex vue-rouert Berechtigungsrouting (ausführliches Tutorial). )

So erhalten Sie den Tastencode der Tastatur in Javascript

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Komponenteninteraktion in Angular2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!