Heim > Web-Frontend > js-Tutorial > So verwenden Sie die Angular4-Eingabe und -Ausgabe

So verwenden Sie die Angular4-Eingabe und -Ausgabe

php中世界最好的语言
Freigeben: 2018-04-14 13:36:47
Original
2318 Leute haben es durchsucht

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
...
Nach dem Login kopieren

order.component.html

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

Dann müssen wir den Wert

an die untergeordnete Komponente

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

...
stock: string
...
Nach dem Login kopieren

app.component.html

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

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
 )
}
Nach dem Login kopieren

preis.quote.html

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

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>
Nach dem Login kopieren

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;
 }
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage