angular4笔记系列之内置指令小结

　　

<强>内置指令
　　

　　

内置属性型指令
　　

　　

属性型指令会监听和修改其它HTML元素或组件的行为,元素属性(属性),DOM属性(财产)。

　　

<强> NgClass
　　

　　

形式:[ngClass]=吧鳌?br/> 　　

　　

通过绑定到NgClass,可以同时添加或移除多个类。

　　 　　 　　setCurrentClasses () { 　　这一点。currentClasses={ 　　“saveable”: this.canSave, 　　“修改”:! this.isUnchanged, 　　“特殊”:this.isSpecial 　　}; 　　} 　　 　　& lt; div [ngClass]=" currentClasses "在这div
　　之前 　　 　　

<强> NgStyle
　　

　　

形式:[ngStyle]=吧鳌?br/> 　　

　　

NgStyle绑定可以同时设置多个内联样式。

　　 　　 　　setCurrentStyles () { 　　这一点。currentStyles={ 　　“字体样式”:这个。canSave & # 63;“斜体”:“正常”, 　　“粗细”:!这。isUnchanged & # 63;“大胆”:“正常”, 　　“字体大小”:这个。牵手& # 63;“24 px”:“12 px” 　　}; 　　} 　　 　　& lt; div [ngStyle]=" currentStyles "在这div
　　 　　之前 　　 　　

<强> NgModel
　　

　　

形式:[(ngModel)]=吧鳌?br/> 　　

　　

使用[(ngModel)]双向绑定到表单元素。

　　 　　 　　& lt;输入[(ngModel)]=癱urrentHero.name”在 　　 　　

使用ngModel时需要FormsModule
　　

　　

<强>内置结构型指令
　　

　　

<强> NgIf
　　

　　

形式:* ngIf=吧鳌?/p> 　　 　　 　　& lt; app-hero-detail * ngIf=" isActive "祝辞& lt;/app-hero-detail> 　　 　　

<强> NgFor
　　

　　

形式:* ngFor=吧鳌?/p> 　　 　　 　　& lt; div * ngFor=叭糜⑿鄣挠⑿邸痹趝{hero.name}} & lt;/div> 　　 　　

<强> NgSwitch
　　

　　

形式:[ngSwitch]=吧鳌?/p> 　　 　　 　　& lt; div [ngSwitch]=" currentHero.emotion "比; 　　& lt; app-happy-hero * ngSwitchCase=翱炖帧?英雄)=癱urrentHero祝辞& lt;/app-happy-hero> 　　& lt; app-sad-hero * ngSwitchCase=氨恕?英雄)=癱urrentHero祝辞& lt;/app-sad-hero> 　　& lt; app-unknown-hero * ngSwitchDefault(英雄)=癱urrentHero祝辞& lt;/app-unknown-hero> 　　& lt;/div> 　　 　　

NgSwitch实际上包括三个相互协作的指令:NgSwitch, NgSwitchCase和NgSwitchDefault
　　

　　

<强>模板引用变量(# var)
　　

　　

模板引用变量通常用来引用模板中的某个DOM元素,它还可以引用角组件或指令或Web组件。

　　 　　 　　输入# & lt;电话占位符=暗缁昂怕搿北? 　　 　　& lt;按钮(点击)=" callPhone (phone.value)”祝辞Call 　　之前 　　 　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

angular4笔记系列之内置指令小结