0

我想添加由 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，或者是否有其他方法可以做到这一点？

4

1 回答 1

1

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

检查源代码以查看 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) + "%";
  }
}
于 2019-12-03T15:30:49.097 回答