Angular 2-动态更改之后的CSS元素

@Component({
  selector: 'app-example',
  template: `
    <div [ngStyle]="{ 'background-color': bgColor }">Dynamic CSS</div>
  `
})
export class ExampleComponent {
  bgColor: string = 'red';
}

@Component({
  selector: 'app-example',
  template: `
    <div [ngClass]="{ 'highlight': isHighlighted }">Dynamic CSS</div>
  `,
  styles: [`
    .highlight {
      background-color: yellow;
    }
  `]
})
export class ExampleComponent {
  isHighlighted: boolean = true;
}

import { Component, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div #myDiv>Dynamic CSS</div>
  `
})
export class ExampleComponent {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  changeColor() {
    const div = this.el.nativeElement.querySelector('div');
    this.renderer.setStyle(div, 'background-color', 'blue');
  }
}