javascript - 基于模型属性设置宿主组件的样式

Question

我知道您可以采用的不同类方法和 :host 选择器，但是我想根据组件类中的属性应用条件托管。

假设我有

@Input('val') val: string;

然后，根据该输入，我计算元素的高度，并希望通过 @Component 的 host 配置来应用它。我该怎么做？

我知道使用 ElementRef 的解决方法，并使用常规 JavaScript 应用样式，但我对这种方法不太满意，所以我正在寻找“Angular 方法”。

由于 Angular 网站上缺乏文档，而且完全没有现实世界的示例，我真的很苦恼。

Answer 1

我认为你可以写这样的东西

  @Input('val') val: string;
  @HostBinding('style.height') get height {
    return this.val + 'px';
  }

请参阅此处的示例 https://plnkr.co/edit/kNSjCFG710xsCUiiBxat?p=preview