今回は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 ...
<input type="text" placeholder="请输入股票代码" [(ngModel)]="stock"> <app-order [stockCode]="stock" [amount]="100"></app-order>
データ バインディングを使用して、ユーザーが入力した値をコントローラーのストックにバインドします。次に、それがサブコンポーネントに渡され、サブコンポーネントはそれを受信した後、ページに表示します。
Angular4 出力プロパティ
出力属性は、子コンポーネントが親コンポーネントに情報を渡す必要がある場合に使用する必要があります。
たとえば、証券取引所から株式のリアルタイム価格を取得する場合、この情報を外部からも取得できるようにしたいと考えています。便宜上、ここでのリアルタイム株価は乱数によってシミュレートされています。ここでサブコンポーネントを app.price.quote と呼びましょうEventEmitter を使用して子コンポーネントからイベントを発行します
価格.quote.tsexport 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 ) }
<p> 这里是报价组件 </p> <p> 股票代码是{{stockCode}} </p> <p> 股票价格是{{price | number:'2.2-2'}} </p>
<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote> <p> 这是在报价组件外, 股票代码是{{priceQuote.stokcCode}}, 股票价格是{{priceQuote.lastPrice | number:'2.2-2'}} </p>
export class AppComponent{ priceQuote:PriceQuote = new PriceQuote('', 0); priceQuoteHandler(event:PriceQuote){ this.priceQuote = event; } }
WeChat アプレットにポップアップ ダイアログ ボックスを追加する
以上がAngular4の入出力の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。