Anglar 4の入力属性と出力属性例の詳細

本明細書の例では、アングラー4の入力属性と出力属性について説明する。皆さんに参考にしてあげます。具体的には以下の通りです。
Anglar 4属性を入力します
入力属性は、通常、親コンポーネントからサブアセンブリに情報を伝達するために使用される。
栗を挙げます。私たちは父の部品からサブアセンブリに株式コードを渡します。ここのサブアセンブリは私たちはそれをapp-orderと言います。
まず、app.order.com mponent.tsでは、親のコンポーネントから渡される値が必要であると宣言します。
order.com mponent.ts

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

order.com mponent.

<p>      </p>
<p>     {{stockCode}}</p>
<p>     {{amount}}</p>

そして、私たちは親のコンポーネントに値を送る必要があります。
app.com mponent.ts

...
stock: string
...

app.com mponent.

<input type="text" placeholder="       " [(ngModel)]="stock">
<app-order [stockCode]="stock" [amount]="100"></app-order>

ここではAnglarの双方向データバインディングを使用して、ユーザーが入力した値とコントローラのstockをバインディングします。サブアセンブリに転送し、サブアセンブリは受信後、ページに表示される。
Anglar 4出力属性
サブコンポーネントが親コンポーネントに情報を伝えるためには、出力属性が必要です。
栗を挙げます。私たちは株式取引所から株のリアルタイム価格を獲得した時に、外部からもこの情報が得られますように。便利さのために、ここのリアルタイムの株価は乱数でシミュレーションします。ここのサブコンポーネントは私達はそれをapp.price.quotと呼びます。
EventEmitterを使ってサブアセンブリから外にイベントを送信します。
price.quot.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.

<p>
        
</p>
<p>
      {{stockCode}}
</p>
<p>
      {{price | number:'2.2-2'}}
</p>

次に私たちは父のコンポーネントでイベントを受信します。
app.com mponent.

<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>
<div>
         ，      {{priceQuote.stokcCode}}，
      {{priceQuote.lastPrice | number:'2.2-2'}}
</div>

イベントバインディングとオリジナルのイベントバインディングは同じで、イベント名を（）に入れます。
app.com mponent.ts

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

ここでのイベントタイプは、サブアセンブリがイベントを転送するタイプです。
簡単に言えば、サブコンポーネントは、イベントprice Changeをemitで送信し、値を伝達し、親コンポーネントは、サブアセンブリを使用するときにprice Changeイベントをトリガし、値を受信する。
AnglarJSに関する詳細について興味がある読者は、このサイトのテーマを見ることができます。「AnglarJS指令操作テクニックのまとめ」、「AnglarJS入門と上級教程」および「アングラルJS MVCアーキテクチャのまとめ」
この記事で皆さんのAnglarJSプログラムの設計に役に立ちますように。