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 を使用して子コンポーネントからイベントを発行します

価格.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
 )
}

価格.quote.html

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

次に、親コンポーネントでイベントを受け取ります

app.component.html

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

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

app.component.ts

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

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

簡単に言うと、子コンポーネントは、emit を通じて PriceChange イベントを発行し、値を渡します。親コンポーネントは、子コンポーネントを使用するときに、priceChange イベントをトリガーして値を受け取ります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

WeChat アプレットにポップアップ ダイアログ ボックスを追加する

js で非同期メソッドを実装する初心者必見の本

以上がAngular4の入出力の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。