Input properties and output properties in Angular4 (detailed tutorial)

This article mainly introduces the input properties and output properties of Angular4, and 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

This article describes the input properties and output properties of Angular4 with examples. Share it with everyone for your reference, the details are as follows:

Angular4 input attributes

Input attributes are usually used from parent components to child components Passing information

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

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

order.component.ts

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

order.component.html

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

Then we need to add it to 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 The value entered by the user is bound 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 attribute

The output attribute is needed 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. 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:&#39;2.2-2&#39;}}
</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:&#39;2.2-2&#39;}}
</p>

Event binding is the same as native event binding Yes, the event name is placed 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.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed introduction to the usage of ref ($refs) in Vue.js

Detailed interpretation of father-son communication in vue

How to implement the numeric keyboard component using Vue

The above is the detailed content of Input properties and output properties in Angular4 (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!