Question

我想将Bootstrap定义的make-col混合与Angulars Renderer2相加。

上下文

这个想法是创建一个接收两个输入的指令：

元素应使用的列数
总列数

并将mixin添加到元素中。

代码

在理想的世界中，它看起来像这样：

current_timestamp()

问题有谁知道您是否可以通过Angular中的renderer2应用mixin或是否有另一种方法？

Answer 1

您的SASS代码是在构建应用程序时而不是在应用程序运行时编译的。您只能在CSS上无法在运行时动态提供SASS代码。

检查source code，以查看mixin添加了什么CSS。然后添加CSS。

@Directive({
  selector: "[appCustomColumn]"
})
export class CustomColumnDirective {
  @Input() amountOfColumns: number;
  @Input() totalAmountOfColumns: number;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnChanges(changes: SimpleChanges) {
    this.renderer.setStyle(
      this.el.nativeElement,
      "flex",
      "1 1 " + this.percentage(this.amountOfColumns / this.totalAmountOfColumns)
    );
    this.renderer.setStyle(
      this.el.nativeElement,
      "max-width",
      this.percentage(this.amountOfColumns / this.totalAmountOfColumns)
    );
  }

  private percentage(n: number): string {
    return Math.floor(n * 100) + "%";
  }
}

使用Angular Renderer2添加SASS mixin

1 个答案: