动态样式化外部库

  • Z时代
  • 2024-01-10
  • 分类：问答

我的组件加载了一个外部库，该库在模板内部生成一些花哨的HTML。插图：动态样式化外部库

@Component({ 
template: `<div #container></div>`, 
encapsulation: ViewEncapsulation.None, 
export class App { 
    @ViewChild("container") container_ref; 
    dynamic_height = "50 px"; 
    ngOnInit() { 
     The_library.insert_html_square_inside_of(this.container_ref.nativeElement); 
    } 
}

图书馆把一个<div id="square"/>容器内。我如何根据我的dynamic_height变量动态确定此方形div的高度？如果它是简单的模板代码，我可以做<div [style.height]="dynamic_height">。但是html来自libarary，所以这是不可行的。

我的想法而已：

  • 在样式：#square { height: {{dynamic_height}} }。没有错误，但Angular不解析这个，因此明显无效的属性值。

  • 输入模板：template: "<style>#square{ height: {{dynamic_height}} }</style>"。相同

  • 挂入dynamic_height（ngOnChanges）的更改并使用document.getElementById("square").style.height = dynamic_height手动更新高度。可能工作，但可能是错误的方法。

如果需要，这里是一个带有示例代码的插入器。 https://embed.plnkr.co/M46XfP/

（现实世界中的用例：设置vis时间表组高度）

回答：

我设法创建另一个股利，其中将包括在模板中的<style>标签做到这一点：

<div id="container" #container></div> 
<div id="styleContainer" #styleContainer></div>

然后在app.component.ts，您使用装饰器@ViewChild为#style容器并且您以这种方式插入HTML：

export class App { 
    @ViewChild("container") container_ref; 
    @ViewChild("styleContainer") style_container; 
    dynamic_height = '50px'; 
    ngOnInit() { 
    render_something(this.container_ref.nativeElement); 
    this.updateStyle(this.dynamic_height); 
    } 
}

每次要更改调用updateStyle（）的样式时，它都会替换容器中的<style>标记。

updateStyle(height: string) { 
    this.style_container.nativeElement.innerHTML = 
    `<style>#square {height: `+height+` !important; }</style>`; 
}

以上是 动态样式化外部库 的全部内容， 来源链接： utcz.com/qa/258126.html

回到顶部