单个style

@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.sass'],
  template: `
     <div [style.width]="'100px'">测试</div>
     <div [style.width.px]="100">测试</div>
   `,
})
export class AppComponent {
}

多个style

@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.sass'],
  template: `
     <div [style]="styleExpr">测试</div>
   `,
})
export class AppComponent {
  styleExpr = {
     color: 'red',
     fontSize: '30px'
  }
}

单个class

//app.component.ts
@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.sass'],
  template: `<div [class.active]="isActive">测试</div>`,
})
export class AppComponent {
   isActive = true
}

//app.component.css
.active{
  color: red;
}

多个class

//app.component.ts
@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.sass'],
  template: `
     <div class="classExpr">测试</div>
     <div class="{foo: true, bor: false}">测试</div>
     <div class="[bar, foo]">测试</div>
   `,
})
export class AppComponent {
   classExpr = 'foo bar'
}

//app.component.css
.foo{
  color: red;
}
.bar{
  font-size: 14px;
}

ngStyle

要同时设置多个内联样式

@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.sass'],
  template: `
     <div [ngStyle]="currentStyles">测试</div>
   `,
})
export class AppComponent {
   currentStyles = {
      'font-size': '30px',
      'color': 'red',
    }
}

ngClass

同时添加或删除多个css类

@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.sass'],
  template: `
     <div [ngClass]="currentClasses">测试</div>
   `,
})
export class AppComponent {
   currentClasses = {
      'foo': true,
      'bar':  false,
    }
}