使用 Angular Renderer2 添加 SASS mixin答案

【问题标题】：Add a SASS mixin with Angular Renderer2使用 Angular Renderer2 添加 SASS mixin
【发布时间】：2019-12-03 13:29:28
【问题描述】：

我想将 Bootstrap 定义的 make-col mixin 与 Angulars Renderer2 一起添加。

上下文

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

元素应使用的列数
总列数

并将mixin添加到元素中。

代码

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


@Directive({
    selector: '[appCustomColumn]'
})
export class CustomColumnDirective implements OnInit {

    @Input()
    public amountOfColumns: number;

    @Input()
    public totalAmountOfColumns: number;

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

    public ngOnInit(): void {
        // This API does not exist
        this.renderer.setMixin(this.elementRef.nativeElement, '@include make-col(' + this.amountOfColumns  + ',' + this.totalAmountOfColumns + ')');
    }
}

问题有谁知道您是否可以通过 Angular 中的 renderer2 应用 mixin，或者是否有其他方法可以做到这一点？

【问题讨论】：

标签： angular sass angular-renderer2

【解决方案1】：

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

检查 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) + "%";
  }
}

【讨论】：

谢谢！这是我采用的解决方案！