So verwenden Sie die Angular4-Eingabe und -Ausgabe

Dieses Mal zeige ich Ihnen, wie Sie die Angular4-Eingabe und -Ausgabe verwenden und welche Vorsichtsmaßnahmen bei der Verwendung der Angular4-Eingabe und -Ausgabe gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Angular4-EingabeEigenschaften

Eingabeattribute werden normalerweise von übergeordneten Komponenten verwendet, um Informationen an untergeordnete Komponenten weiterzugeben

Beispiel: Wir übergeben den Aktiencode von der übergeordneten Komponente an die untergeordnete Komponente. Wir nennen die untergeordnete Komponente app-order

Deklarieren Sie zunächst den Wert, der von der übergeordneten Komponente übergeben werden muss, in app.order.component.ts

order.component.ts

...
@Input()
stockCode: string
@Input()
amount: string
...

order.component.html

<p>这里是子组件</p>
<p>股票代码为{{stockCode}}</p>
<p>股票总数为{{amount}}</p>

Dann müssen wir den Wert

an die untergeordnete Komponente

in der übergeordneten Komponente (app.component) übergeben. app.component.ts

...
stock: string
...

app.component.html

<input type="text" placeholder="请输入股票代码" [(ngModel)]="stock">
<app-order [stockCode]="stock" [amount]="100"></app-order>

Hier verwenden wir die bidirektionale Datenbindung von Angular, um den vom Benutzer eingegebenen Wert an den Bestand im Controller zu binden. Dann wird es an die Unterkomponente übergeben und die Unterkomponente zeigt es nach dem Empfang auf der Seite an.

Angular4-Ausgabeeigenschaften

Ausgabeattribute müssen verwendet werden, wenn eine untergeordnete Komponente Informationen an die übergeordnete Komponente übergeben muss.

Wenn wir beispielsweise den Echtzeitkurs einer Aktie von der Börse erhalten, hoffen wir, dass diese Informationen auch extern eingeholt werden können. Der Einfachheit halber wird der Echtzeit-Aktienkurs hier durch eine Zufallszahl simuliert. Wir nennen die Unterkomponente hier app.price.quote

Verwenden Sie EventEmitter, um Ereignisse von untergeordneten Komponenten auszugeben

price.quote.ts

export class PriceQuoteComponent implements OnInit{
 stockCode: string = 'IBM';
 price: number;
 //使用EventEmitter发射事件
 //泛型是指往外发射的事件是什么类型
 //priceChange为事件名称
 @Output()
 priceChange:EventEmitter<PriceQuote> = new EventEmitter();
 constructor(){
  setInterval(() => {
   let priceQuote = new PriceQuote(this.stockCode, 100*Math.random());
   this.price = priceQuote.lastPrice;
   //发射事件
   this.priceChange.emit(priceQuote);
  })
 }
 ngInit(){
 }
}
//股票信息类
//stockCode为股票代码，lastPrice为股票价格
export class PriceQuote{
 constructor(public stockCode:string,
    public lastPrice:number
 )
}

preis.quote.html

<p>
 这里是报价组件
</p>
<p>
 股票代码是{{stockCode}}
</p>
<p>
 股票价格是{{price | number:'2.2-2'}}
</p>

Dann erhalten wir das Ereignis in der übergeordneten Komponente

app.component.html

<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>
<p>
 这是在报价组件外， 股票代码是{{priceQuote.stokcCode}}，
 股票价格是{{priceQuote.lastPrice | number:'2.2-2'}}
</p>

Die Ereignisbindung ist dasselbe wie die native Ereignisbindung, beide geben den Ereignisnamen in () ein.

app.component.ts

export class AppComponent{
 priceQuote:PriceQuote = new PriceQuote('', 0);
 priceQuoteHandler(event:PriceQuote){
  this.priceQuote = event;
 }
}

Der Ereignistyp ist hier der von der Unterkomponente übergebene Ereignistyp.

Vereinfacht ausgedrückt gibt die untergeordnete Komponente das Ereignis „priceChange“ über emit aus und übergibt den Wert. Die übergeordnete Komponente löst das Ereignis „priceChange“ aus und empfängt den Wert, wenn sie die untergeordnete Komponente verwendet.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Popup-Dialogfeld im WeChat-Applet hinzufügen

Asynchrone JS-Implementierungsmethode, die Anfänger lesen müssen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Angular4-Eingabe und -Ausgabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!