Eingabeeigenschaften und Ausgabeeigenschaften in Angular4 (ausführliches Tutorial)

In diesem Artikel werden hauptsächlich die Eingabeattribute und Ausgabeattribute von Angular4 vorgestellt und die Konzepte, Funktionen und zugehörigen Verwendungsfähigkeiten der Angular4-Eingabeattribute und Ausgabeattribute anhand von Beispielen ausführlich analysiert

Dieser Artikel beschreibt die Eingabeeigenschaften und Ausgabeeigenschaften von Angular4 anhand von Beispielen. Teilen Sie es wie folgt als Referenz mit allen:

Angular4-Eingabeattribute

Eingabeattribute werden normalerweise von übergeordneten Komponenten verwendet Untergeordnete Komponenten Weitergabe von Informationen

Zum Beispiel: Wir übergeben den Aktiencode von der übergeordneten Komponente an die untergeordnete Komponente. Die untergeordnete Komponente heißt hier app-order

Zuerst in app.order.component. Deklarieren Sie in ts den Wert, der von der übergeordneten Komponente

order.component.ts

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

order.component.html

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

Dann müssen wir es zur übergeordneten Komponente (App-Komponente) hinzufügen

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 Angular ​​Zwei-Wege-Datenbindung. Der vom Benutzer eingegebene Wert ist an den Bestand im Controller gebunden. Dann wird es an die Unterkomponente übergeben und die Unterkomponente zeigt es nach dem Empfang auf der Seite an.

Angular4-Ausgabeattribut

Das Ausgabeattribut wird benötigt, wenn die untergeordnete Komponente Informationen an die übergeordnete Komponente übergeben muss.

Zum Beispiel: Wenn wir 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 der Unterkomponente 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
 )
}

price. quote.html

<p>
 这里是报价组件
</p>
<p>
 股票代码是{{stockCode}}
</p>
<p>
 股票价格是{{price | number:&#39;2.2-2&#39;}}
</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:&#39;2.2-2&#39;}}
</p>

Die Ereignisbindung ist dasselbe wie die native Ereignisbindung. Ja, das Ereignis Der Name wird in () eingefügt.

app.component.ts

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

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

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Einführung in die Verwendung von ref ($refs) in Vue.js

Detaillierte Interpretation von Vater- Son-Kommunikation in Vue

So implementieren Sie die numerische Tastaturkomponente mit Vue

Das obige ist der detaillierte Inhalt vonEingabeeigenschaften und Ausgabeeigenschaften in Angular4 (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!