Detailed explanation of the input properties and output properties of Angular4

This article mainly introduces the input properties and output properties of Angular4. It analyzes the concepts, functions and related usage skills of Angular4 input properties and output properties in detail in the form of examples. Friends in need can refer to it. I hope it can help everyone.

Angular4 input attribute

The input attribute is usually used to transfer information from the parent component to the child component

For example: we pass the stock code from the parent component to the child component, here We call the child component 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 to the child component in the parent component (app.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 combine the user input value and control Bind the stock in the browser. Then it is passed to the subcomponent, and the subcomponent displays it on the page after receiving it.

Angular4 Output Properties

Output properties are needed when a 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. We call the subcomponent here app.price.quote

Use EventEmitter to emit events from the subcomponent

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 it in the parent component Event

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. All 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 out. When the parent component uses the child component, it will trigger the priceChange event and receive the value.

Related recommendations:

Project preparation and environment building operations in Angular4

CSS style example code for how to display content in Angular4

Detailed explanation of examples of routing Router class in Angular4

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