Angular4 の入力プロパティと出力プロパティ (詳細なチュートリアル)

この記事では、Angular4 の入力属性と出力属性を主に紹介し、Angular4 の入力属性と出力属性の概念、機能、および関連する使用スキルをサンプルの形式で詳細に分析します。では、Angular4 の入力属性と出力属性の例を説明します。参考までに皆さんと共有してください。詳細は次のとおりです:

Angular4 入力属性

入力属性は通常、親コンポーネントから子コンポーネントに情報を渡すために使用されます

例: から株を渡します。親コンポーネントから子コンポーネントへ コード、ここではサブコンポーネントを app-order と呼びます

まず、親コンポーネントから渡す必要がある値を app.order.component.ts で宣言します

order.component.ts

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

order.component.html

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

次に、親コンポーネント (app.component) の子コンポーネントに値を渡す必要があります

app.component.ts

...
stock: string
...

app.component.html

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

ここでは使用しますAngular の双方向データ バインディングはユーザー入力の値をコントローラー内のストックにバインドします。次に、それがサブコンポーネントに渡され、サブコンポーネントはそれを受信した後、ページに表示します。

Angular4 出力属性

出力属性は、子コンポーネントが親コンポーネントに情報を渡す必要がある場合に必要です。

例: 株式取引所からリアルタイムの株価を取得するとき、この情報を外部からも取得できるようにしたいと考えています。便宜上、ここでのリアルタイム株価は乱数によってシミュレートされています。ここでサブコンポーネントを app.price.quote と呼びます

EventEmitter を使用してサブコンポーネントからイベントを発行します

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>

それから親コンポーネント Event で受け取ります

app.component.html

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

イベント バインディングはネイティブ イベント バインディングと同じで、どちらも () 内にイベント名を入れます。

app.component.ts

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

ここでのイベント タイプは、サブコンポーネントによって渡されるイベントのタイプです。

上記は私があなたのためにまとめたものです。

関連記事:

Vue.jsのref($refs)の使い方の詳細な紹介

vueにおける親子通信の詳細な解釈

Vueを使用してテンキーコンポーネントを実装する方法

以上がAngular4 の入力プロパティと出力プロパティ (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。