How to use Angular4 input and output

This time I will show you how to use Angular4 input and output, what are the precautions when using Angular4 input and output, the following is a practical case, let's take a look.

Angular4InputProperties

Input properties are usually used to pass information from parent components to child components

For example: we pass the stock code from the parent component to the child component. We call the child component here app-order

First declare the value that needs to be passed in from the parent component in app.order.component.ts

order.component.ts

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

order.component.html

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

Then we need to pass the value

in the parent component (app.component) to the child component

app.component.ts

...
stock: string
...

app.component.html

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

Here we use Angular's two-way data binding to bind the value entered by the user to the stock in the controller. Then it is passed to the subcomponent, and the subcomponent displays it on the page after receiving it.

Angular4 output properties

The output attribute needs to be used when the child component needs to pass information to the parent component.

For example: when we obtain the real-time price of a stock from the stock exchange, we hope that this information can also be obtained externally. For convenience, the real-time stock price here is simulated by a random number. Let’s call the subcomponent here app.price.quote

Use EventEmitter to emit events from child components

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>

Then we receive the event in the parent component

app.component.html

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

Event binding is the same as native event binding, both put the event name in ().

app.component.ts

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

The event type here is the type of event passed by the subcomponent.

To put it simply, the child component emits the priceChange event through emit and passes the value. The parent component will trigger the priceChange event and receive the value when using the child component.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Add a pop-up dialog box in the WeChat applet

A must-see for beginners to implement asynchronous methods in js

The above is the detailed content of How to use Angular4 input and output. For more information, please follow other related articles on the PHP Chinese website!