Angular2-Eingabe- und Ausgabeanalyse

Dieser Artikel stellt hauptsächlich das Verständnis und die Beispiele von angle2 ng2 @input und @output vor. Der Herausgeber findet es ziemlich gut. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Angular2 @input und @output verstehen

Erstellen Sie zuerst ein Beispiel und geben Sie dann den Code an

Zum Beispiel:

<talk-cmp [talk]="someExp" (rate)="eventHandler($event.rating)">

input, [talk]="someExp" Dieses Tag kann als spezieller Listener verstanden werden, der den von der übergeordneten Komponente übergebenen someExp-Parameter abhört und speichert In seiner eigenen Komponente scheint sich eine Hintertür geöffnet zu haben, die nur den Eintritt einiger Exps in die übergeordnete Komponente zulässt Variable über @Input sprechen und dann verwenden.

output, (click)="eventHandler($event.rating) Dies bedeutet, dass beim Auslösen des Click-Ereignisses der untergeordneten Komponente die eventHandler-Funktion der übergeordneten Komponente ausgeführt wird und die Parameter der untergeordneten Komponente übernommen werden $event. Die Bewertung wird an die eventHandler-Funktion der übergeordneten Komponente übergeben, genau wie wenn ein Kind weint (das Klickereignis ausführt), seine Mutter es sofort in den Armen hält (ausführt den eventHandler der Mutter) und gleichzeitig das Mutter erhält einige Parameter des Kindes ( $event.rating)

1. @input()

Die übergeordnete Komponente Father.component.ts stellt Daten bereit

import {Component} from "@angular/core";
@Component({
  selector: "my-father",
  templateUrl: "father.html"
})
export class FatherComponent {
  data: Array<Object>;
  constructor() {
    this.data = [
      {
        "id": 1,
        "name": "html"
      },
      {
        "id": 2,
        "name": "css"
      },
      {
        "id": 3,
        "name": "angular"
      },
      {
        "id": 4,
        "name": "ionic"
      },
      {
        "id": 5,
        "name": "node"
      }
    ]
  }
}

Vorlagendatei Father.html

<h1>父组件</h1>
// 包含子组件， 并使用属性传递数据过去
<my-child [info]="data"></my-child>

Unterkomponente child.component.ts erhält Daten

import {Component, Input} from "@angular/core";
@Component({
  selector: "my-child",
  templateUrl: "child.html"
})
export class ChildComponent {  
  // 使用@Input获取传递过来的数据
  @Input()
  info: Array<Object>;
  constructor() {
  
  }
}

Untergeordnete Komponente child.html-Vorlagendatei

<ul>
  <li *ngFor="let item of info">
    {{item.name}}
  </li>
</ul>

2.

Untergeordnete Komponente three-link.component.ts

1. Einführung von

import {Component, OnInit, Output, EventEmitter} from "@angular/core";

2

export class ThreeLinkComponent {
  province: string;
  // 输出一下参数
  @Output() provinceOut = new EventEmitter();  
  constructor() {
    this.province = "陕西";
  } 
}

3. Das Ereignis wird ausgelöst und die Variablen werden an die übergeordnete Komponente ausgegeben

provinceChange() {
  // 选择省份的时候发射省份给父组件
  this.provinceOut.emit(this.province);
}

Vorlage für übergeordnete Komponente

<!--三级联动组件-->
<three-link (provinceOut)="recPro($event)"></three-link>

Übergeordnete Komponente

// 函数接受子函数传递过来的变量， 子函数中emit的时候触发这个函数。
recPro(event) {
  this.province = event;
}

Verwandte Empfehlungen:

JS-Implementierung des Klickens auf das Dropdown-Menü, um das Beispiel für die Synchronisierung von Inhalten mit dem Eingabefeld auszuwählen

JS klickt auf das Dropdown-Menü, um die Auswahl zu synchronisieren Inhalt des Eingabefelds Implementierungsmethode

Verwendung Beispielanalyse der Ausgabe-Tag-Markierung des JavaScript-Rückgabewerts

Das obige ist der detaillierte Inhalt vonAngular2-Eingabe- und Ausgabeanalyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!