angular4输入有效性_Angular4输入与输出怎么使用

这次给大家带来Angular4输入与输出怎么使用，使用Angular4输入与输出的注意事项有哪些，下面就是实战案例，一起来看一下。

Angular4输入属性

输入属性通常用于父组件向子组件传递信息

举个栗子：我们在父组件向子组件传递股票代码，这里的子组件我们叫它app-order

首先在app.order.component.ts中声明需要由父组件传递进来的值

order.component.ts...

@Input()

stockCode: string

@Input()

amount: string

...

order.component.html

这里是子组件

股票代码为{{stockCode}}

股票总数为{{amount}}

然后我们需要在父组件(app.component)中向子组件传值

app.component.ts...

stock: string

...

app.component.html

这里我们使用了Angular的双向数据绑定，将用户输入的值和控制器中的stock进行绑定。然后传递给子组件，子组件接收后在页面显示。

Angular4输出属性

当子组件需要向父组件传递信息时需要用到输出属性。

举个栗子：当我们从股票交易所获得股票的实时价格时，希望外部也可以得到这个信息。为了方便，这里的实时股票价格我们通过一个随机数来模拟。这里的子组件我们叫它app.price.quote

使用EventEmitter从子组件向外发射事件

price.quote.tsexport class PriceQuoteComponent implements OnInit{

stockCode: string = 'IBM';

price: number;

//使用EventEmitter发射事件

//泛型是指往外发射的事件是什么类型

//priceChange为事件名称

@Output()

priceChange:EventEmitter = 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

这里是报价组件

股票代码是{{stockCode}}

股票价格是{{price | number:'2.2-2'}}

接着我们在父组件中接收事件

app.component.html

这是在报价组件外， 股票代码是{{priceQuote.stokcCode}}，

股票价格是{{priceQuote.lastPrice | number:'2.2-2'}}

事件绑定和原生的事件绑定是一样的，都是将事件名称放在()中。

app.component.tsexport class AppComponent{

priceQuote:PriceQuote = new PriceQuote('', 0);

priceQuoteHandler(event:PriceQuote){

this.priceQuote = event;

}

}

这里的event类型就是子组件传递事件的类型。

简单的说，就是子组件通过emit发射事件priceChange，并将值传递出来，父组件在使用子组件时会触发priceChange事件，接收到值。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：