Question

我的组件加载了一个外部库，它在模板中生成了一些奇特的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"/>放入容器中。如何使此方形div的高度动态依赖于我的dynamic_height变量？如果它是简单的模板代码，我可以<div [style.height]="dynamic_height">。但是html来自图书馆，所以这是不可行的。

到目前为止我的想法：

在样式中：#square { height: {{dynamic_height}} }。没有错误，但Angular不解析这个，因此显然无效的属性值。
在模板中：template: "<style>#square{ height: {{dynamic_height}} }</style>"。相同
挂钩dynamic_height（ngOnChanges）的更改并使用document.getElementById("square").style.height = dynamic_height手动更新高度。可能会工作，但可能是错误的方法。

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

（真实世界用例：设置vis时间轴的组高度）

Answer 1

我设法通过在模板中创建另一个包含<style>标记的div来实现：

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

然后在app.component.ts中，您使用装饰器@ViewChild进行 #styleContainer ，然后以这种方式插入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>`;
}

动态样式外部库

1 个答案: