Detaillierte Erläuterung der Eingabeeigenschaften und Ausgabeeigenschaften von Angular4

In diesem Artikel werden hauptsächlich die Eingabeattribute und Ausgabeattribute von Angular4 vorgestellt. Er analysiert die Konzepte, Funktionen und zugehörigen Verwendungsfähigkeiten von Angular4-Eingabeattributen und Ausgabeattributen ausführlich in Form von Beispielen. Ich hoffe, es kann allen helfen.

Angular4-Eingabeattribute

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

Beispiel: Wir übergeben den Lagercode von der übergeordneten Komponente an die untergeordnete Komponente Komponente, hier 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 Wir verwenden die bidirektionale Datenbindung von Angular und binden den vom Benutzer eingegebenen Wert an den Bestand im Controller. Dann wird es an die Unterkomponente übergeben und die Unterkomponente zeigt es nach dem Empfang auf der Seite an.

Angular4-Ausgabeattribute

Ausgabeattribute werden benötigt, wenn eine 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:'2.2-2'}}
</p>

Dann erhalten wir Veranstaltungen in die übergeordnete Komponente

app.component.html

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

Ereignisbindung und native Ereignisse Die Bindung ist die Das Gleiche gilt, indem Sie den Ereignisnamen in () eingeben.

app.component.ts

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

Der Ereignistyp hier ist der Typ des Ereignisses, das von der übergeben wurde Unterkomponente.

Um es einfach auszudrücken: Die untergeordnete Komponente gibt das Ereignis „priceChange“ über emit aus und übergibt den Wert. Wenn die übergeordnete Komponente die untergeordnete Komponente verwendet, löst sie das Ereignis „priceChange“ aus und empfängt den Wert.

Verwandte Empfehlungen:

Projektvorbereitung und Umgebungserstellungsvorgänge in Angular4

Beispielcode im CSS-Stil für die Anzeige von Inhalten in Angular4

Detaillierte Erläuterung von Beispielen der Router-Klasse in Angular4

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Eingabeeigenschaften und Ausgabeeigenschaften von Angular4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!