ng4.x 属性声明及绑定
# 1 ：声明属性的方式
public ： 共有 【默认】 可以在这个类里面使用，也可以在外面使用
protected：保护类型 只有在当前类和它的子类里面可以访问
private ：私有 只有在当前类才可以访问这个属性
eg:
No 1：public id = "11";
No 2：private linkUrl：string= "index.jsp";
No 3：public h：any；
No 4：public list = [];
No 5：public list1 :any;
No 6：public list2 :any;
constructor(){
this.h = "<h2>这是一个后台传来的数据</h2>";
this.list = ["1a","2b","3c"];
this.list1 = [
{'title':'11111'},
{'title':'2222'}
];
this.list2 = [
{'cateName':'宝马',
'list':[
{'title':'宝马x1'},
{'title':'宝马x2'},
{'title':'宝马x3'},
]
},
'cateName':'奥迪',
'list':[
{'title':'奥迪q1'},
{'title':'奥迪q2'},
{'title':'奥迪q3'},
]
}
]
}
# 2 :HTML 属性 和DOM 属性的区别
No 1：<input value="xxj" onInputEvent($event)>
onInputEvent(event:any){ console.log(event.target.value)}
//DOM属性 -- 输入的值 -- 当前值
onInputEvent(event:any){ console.log(event.target.getAttrbute('value'))}
//HTML属性 -- xxj -- 初始值
No 2:<button disabled="false"> clickMe<button>
//通过html属性设置，无论何值 按钮都是禁用的
//用dom属性设置,dom属性默认为false --- 当设置了html属性后 dom属性变为true
# 3 ：DOM属性绑定 == 插值表达式
No 1：数据文本绑定：{{id}}
No 2 ：属性绑定：<a [href] ={{linkUrl]}> </a>
No 3：html绑定：<span [innerHTML] = "h"></span>
No 4 :
<ul>
<li *ngFor ="let item of list; let key = index">
{{key} -- {{item}}
</li>
</ul>
No 5:
<ul>
<li *ngFor ="let item of list1; let key = index">
{{key} -- {{item.title}}
</li>
</ul>
No 6：
<ul>
<li template =" ngFor let item of list2; let key = index">
{{key} -- {{item.catename}}
<ul>
<li * ngFor="let car of item.list">
--{{car.title}}
</li>
</ul>
</li>
</ul>
# 4：HTML属性绑定
No 1：基本Html属性绑定：
<td [attr.colspan] = "tableColspan">***</td>
No 2：样式绑定：
<button [style.color] = "isSpecial? 'red' : 'green' ">Red</button>
<div [ngStyle] = "{'font-style':this.canSave? ' italic' : 'normal'}">
<div [style.font-size.em]= "isDev?3:1"> //单位
No 3：css类绑定：
E 1: <div [class] = "divClass">***</div>
全有和全无的替换型绑定
divClass:string;
constructor() {
setTimeout( () =>{
this.divClass = "classA classB classC";
},3000)
}
E 2: <div class = "classA classB" [class.classC] = "isBig">***
控制部分样式
isBig:boolean = false;
constructor() {
setTimeout( () =>{
this.isBig= "true";
},3000)
}
E 3 ：<div [ngClass] = "{cssClass: expression}">
同时控制多个类名【通过表达式的布尔值控制】
<div [ngClass] = "divClass">
divClass:any ={
classA:false;
classB:true;
classC:true;
}
constructor() {
setTimeOut(() =>{
this.divClass = {
classA:true;
classB:false;
classC:false;
};
},3000)
}...
扩展：给一个组件指定某一个css文件
@Component({
templateUrl: '' //指定要加载模块的页面地址
styleUrls:['./test.css','./hello.css']
})
