使用 Angular Renderer2 添加 SASS 混合

Question

我想添加make-col mixin defined by Bootstrap with the 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 应用混合，或者是否有其他方法可以做到这一点？

Answer 1

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

检查 source code 以查看 CSS mixin 添加的内容。然后添加 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 混合

Add a SASS mixin with Angular Renderer2

sass

angular

angular-renderer2