Angular4基本功【组件绑定】

背景

最近项目上用到了angular4进行开发前台,组织了零散的知识分享给大家

根据需求改变属性,根据代码可以看出,只要star是true则我们现实我们的样式,如果为false则不显示,很好的做到了动态的效果

HTML
<div *ngFor="let star of stars">
[class.glyphicon-star-empty]="star"
div>
ts
private stars:boolean[];
this.stars=[false,true,true,true,true]

Src绑定
在我们普通页面中我们需要些大量的URL路径在HTML页面上,但是angular4使用的时候,只需要在ts页面中写上,然后HTML使用该属性就可以

html
"imgUrl">
ts
private imgUrl='http://placehold.it/320*150';

俩个组件之间进行交互
使用@Input就可以输出,但是需要对方的指示器关联才可以使用

ts
引用
import{Input}from '@angular/core'
导出目标属性值
private rating:number=2.5

对方html进行关键。接收使用 
"product.rating">

程序初始化的地方

ngOnInit(){
初始化属性
this.products="wangxuefen"
调用第一个函数
test();
}

总结

这些都是小知识点,并且以前都学过,但是没有很细的去体会过,所以再回过头看看

你可能感兴趣的:(angular)