如何将 ngStyle 应用于组件中的 :host 元素？答案

【问题标题】：How to apply ngStyle to :host element in component?如何将 ngStyle 应用于组件中的 :host 元素？
【发布时间】：2016-09-23 01:26:15
【问题描述】：

我有这样的事情：

import { Component, OnInit, Input } from '@angular/core';

@Component({
    selector: 'column',
    template: '<ng-content></ng-content>'
})
export class ColumnComponent {

    @Input() columnWidth: string = '0';        

    constructor() {}
}

我想将属性 columnWidth 应用到 [ngStyle] on

<ng-content></ng-content>

父元素，做这样的事情：

<div [ngStyle]="{'width': columnWidth+'px'}" > ....

我知道如何将样式应用于宿主元素：

:host {  /*styles*/  }

但我不知道给它传递参数。

【问题讨论】：

标签： angular shadow-dom angular2-template

【解决方案1】：

我实际上使用了@GunterZochbauer 的解决方案，但他提到你不能使用变量。也许当时是对的，但使用最新的 Angular，你完全可以。

@HostBinding('style.width.px')
get width(): number {
  return state.width;
}

我正在使用状态管理来设置宽度，然后将其直接应用于宿主元素。效果很好！

【讨论】：

【解决方案2】：

没有办法做到这一点。

你能做的是

@HostBinding('style.width')
width:string = '10px';

或

@HostBinding('style.width.px')
width:number = '10';

主要限制是width 部分是固定的，不能从变量中使用。

另一种完全灵活的方式是

constructor(private elRef:ElementRef, private renderer:Renderer) {}

setStyles() {
  this.renderer.setElementStyle(this.elRef.nativeElement, 'width', '10px');
}

【讨论】：

我有错误：无法绑定到“columnWidth”，因为它不是已知的本机属性（“ ][columnWidth]="150" >
如果您想将输入值绑定到样式 @HostBinding('style.width.px')@Input() columnWidth: string = '0'; 应该可以。你试过什么？
这个答案10星！ :)
我讨厌我必须一直到渲染器，但这是将样式应用于我能找到的主机的唯一方法
Günter，您能否澄清一下“主要限制是宽度部分是固定的，不能从变量中使用”的说法。 -> 我的同事批评了我对Render2 的使用，并举例说明了使用HostBinding 设置变量的宽度。 See stackblitz