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:'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;
 }
}

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

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

関連する推奨事項:

Angular4でのプロジェクトの準備と環境構築操作

Angular4でコンテンツを表示する方法のCSSスタイルのサンプルコード

Angular4のRouterクラスの例の詳細な説明

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