ng-template等的样式问题

我们知道ng-template ng-container ng-content是没有样式的，也是无法添加样式的，他们只是注释而已！ 现在我想这样用

我的目的是在div上便捷的使用*操作符

想要达到的效果，在div上动态添加background-color,background-cover及background-size!

import { Directive, Input, Optional, ViewContainerRef, TemplateRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appBackground]'
})
export class BackgroundDirective {
  @Input()
  set appBackgroundColor(val: string) {
    this.renderToElement('background-color', val);
  }
  @Input() set appBackgroundCover(val: string) {
    this.renderToElement('background-cover', val);
  }
  @Input() set appBackgroundSize(val: string) {
    this.renderToElement('background-size', val);
  }
  @Input() set appBackgroundImage(val: string) {
    this.renderToElement('background-image', val);
  }
  rootNodes: HTMLElement[] = [];
  constructor(
    @Optional()
    public view: ViewContainerRef,
    @Optional()
    public template: TemplateRef<any>,
    public render: Renderer2
  ) {
    const ele: any = this.view.createEmbeddedView(this.template);
    this.rootNodes = ele.rootNodes;
  }

  renderToElement(key, val) {
    this.rootNodes.map(ele => {
      if (ele.nodeType !== 8) {
        this.render.setStyle(ele, key, val);
      }
    });
  }
}
复制代码

好吧 只能这样了！有更好的方法的朋友通知我下！