ng-templateなどの様式問題

1407 ワード

私達はng-template ng-container ng-contentがスタイルがないことを知っています.スタイルを追加することもできません.彼らは注釈だけです.今はこのように使いたいです.
私の目的はdivで簡単に操作することです.
達成したい効果は、divにbackground-カラーを動的に追加し、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,
    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);
      }
    });
  }
}
はい、そうするしかないです.もっといい方法がある友達に教えてください.