内置属性型指令

1. ngClass

   动态添加或者删除css类。

   [ngClass]='表达式'

   • 传入表达式：

     xxxxxxxxxx
     @Component({
       selector: 'app-root',
       template: `
       <div [ngClass]="isSpecial ? 'special' : ''">显示内容</div>
       `,
       styles:[
         `.special{
           color:red
         }`
       ]
     })
     export class AppComponent {
       isSpecial: boolean=true;
       constructor() { 
       }
     }
     

   • 传入对象。对象中以类名作为键，而值是一个用来表明是否应该应用该类的真/假值。

     xxxxxxxxxx
     
     @Component({
       selector: 'app-root',
       template: `
       <div [ngClass]="{special:isSpecial,bordered:isBordered}">显示内容</div>
       `,
       styles:[
         `.special{
           color:red
         }
         .bordered{
           border:1px solid #000
         }
         `
       ]
     })
     export class AppComponent {
       isSpecial: boolean=true;
       isBordered: boolean=true;
       constructor() { 
       }
     }
     

2. ngStyle

   动态设置内联样式。

   xxxxxxxxxx
   <div [ngStyle]="{color:isSpecial?'red':''}">显示内容</div>
   <div [ngStyle]="{color:isSpecial?specialColor:''}">显示内容</div>
   

实时效果反馈

1.下列描述错误的是：

A 属性指令可以更改元素的外形。

B ngClass='{special:false,bordered:true}'最终会添加CSS类'special'

答案

1=>B