小编给大家分享一下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
...app.component.html
<input type="text" placeholder="请输入股票代码" [(ngModel)]="stock">
<app-order [stockCode]="stock" [amount]="100"></app-order>这里我们使用了Angular的双向数据绑定，将用户输入的值和控制器中的stock进行绑定。然后传递给子组件，子组件接收后在页面显示。
Angular4输出属性
当子组件需要向父组件传递信息时需要用到输出属性。
举个栗子：当我们从股票交易所获得股票的实时价格时，希望外部也可以得到这个信息。为了方便，这里的实时股票价格我们通过一个随机数来模拟。这里的子组件我们叫它app.price.quote
使用EventEmitter从子组件向外发射事件
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>接着我们在父组件中接收事件
app.component.html
<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>
<p>
这是在报价组件外， 股票代码是{{priceQuote.stokcCode}}，
股票价格是{{priceQuote.lastPrice | number:'2.2-2'}}
</p>事件绑定和原生的事件绑定是一样的，都是将事件名称放在（）中。
app.component.ts
export class AppComponent{
priceQuote:PriceQuote = new PriceQuote('', 0);
priceQuoteHandler(event:PriceQuote){
this.priceQuote = event;
}
}这里的event类型就是子组件传递事件的类型。
angular4应用中输入的最小值和最大值的方法
我有一个带有表单的angular4应用程序.在这个我输入一个百分比输入.所以,我想用0到100之间的值来阻止输入.
我试图添加min =“0”和max =“100”,但我仍然可以输入一个高于100或小于0的数字.
模板
<md-input-container>
<input type="number"
maxlength="3"
min="0"
max="100"
required
mdInput
placeholder="Charge"
[(ngModel)]="rateInput"
name="rateInput">
<md-error>Required field</md-error>
</md-input-container>你知道我怎么做吗？
解决方法
我成功地使用了表单控件.
这是我的HTML代码：
<md-input-container>
<input type="number" min="0" max="100" required mdInput placeholder="Charge" [(ngModel)]="rateInput" name="rateInput" [formControl]="rateControl">
<md-error>Please enter a value between 0 and 100</md-error>
</md-input-container>在我的打字稿代码中,我有：
this.rateControl = new FormControl("",[Validators.max(100),Validators.min(0)])因此,如果我们输入的值大于100或小于0,则材料设计输入变为红色且该字段未验证.所以之后,如果值不好,我点击保存按钮时就不保存.
以上是“angular4应用中如何输入最小值和最大值”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
