angular绑定动态样式以后如何在绑一个动态样式

可以使用ngStyle指令来绑定多个动态样式。

例如，假设我们有一个组件，它有一个属性color，它根据条件动态地设置颜色：

@Component({
  selector: 'example-component',
  template: `
    <div [ngStyle]="{'background-color': color, 'font-size': fontSize}">
      This is an example component.
    </div>
  `
})
export class ExampleComponent {
  color: string;
  fontSize: string;

  constructor() {
    this.color = 'red';
    this.fontSize = '20px';
  }

  changeColor() {
    this.color = 'blue';
    this.fontSize = '30px';
  }
}

在这个例子中，我们使用ngStyle指令来绑定两个动态样式：background-color和font-size。我们也可以在组件中添加一个方法changeColor来改变属性color和fontSize的值，以演示如何动态地改变样式。

要使用该组件，我们可以在父组件中添加一个按钮，当用户单击按钮时，调用changeColor方法：

@Component({
  selector: 'parent-component',
  template: `
    <example-component></example-component>
    <button (click)="changeColor()">Change Color</button>
  `
})
export class ParentComponent {
  @ViewChild(ExampleComponent) exampleComponent: ExampleComponent;

  changeColor() {
    this.exampleComponent.changeColor();
  }
}

在这个例子中，我们使用ViewChild装饰器来获得ExampleComponent的实例，并在changeColor方法中调用它的changeColor方法。

当我们在浏览器中运行应用程序并单击“Change Color”按钮时，我们将看到ExampleComponent的背景颜色和字体大小动态改变为蓝色和30px。