如何将TypeScript方法的CSS样式与Angular绑定

Question

我有一个如下所示的组件：

@Component({
  selector: 'app-car-item',
  templateUrl: './car-item.component.html',
  styleUrls: ['./car-item.component.css'],
})
export class CarItemComponent {
  public style: string

  addStyle() {
    this.style = 'font-size: 20px'
  }

如何实现addStyle()方法来改变car-item.component.css中的字体大小？

Answer 1

这不是你在Angular中的表现！这就是你要做的事情：

在CarItemComponent中为字体大小添加可修改的内容，例如：

fontSize: number;

在addStyle()中将此数字设置为您要使用的字体大小，并在模板中将其添加到您要更改的字体大小的元素中：

[style.font-size.px]="{{ fontSize }}"

Answer 2

这可能很有用（角度6）：

1. 更改样式以使其看起来已禁用
2. 消除href

https://stackblitz.com/edit/angular-wzgr4h