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