NgStyle在角度6/7/8中的实现

Question

我们在项目中实现了NgStyle的实现，在版本5中，实现如下，

let divRef = new ElementRef(<HTMLDivElement>this._renderer.createElement("div"));
let divStyle = new NgStyle(this._differs, divRef, this._renderer);
        divStyle.ngStyle = {
            "position": "relative",
            "display": "block",
        };
        divStyle.ngDoCheck();

其中_differs表示从@ angular / core导入的KeyValueDiffers

但是从角度6开始，它已更改为仅接受一个参数，即类型为NgStyleImpl的delagate，任何人都可以解释如何实现这一点

let style = new NgStyle(_delegate: NgStyleImpl)   

如何实现_delegate：NgStyleImpl

Answer 1

这是完全没有。 angular的想法是定义一个模板，然后使用.ts组件处理业务逻辑。

看到您在做什么并不需要逻辑，您可以使用：

<div style="position: relative; display: block"></div>

---

如果您的样式正在更改，例如显示属性，则可以在模板中使用[NgStyle]定义div：

<div style="position: relative" [NgStyle]="{'display': displayVariable}"></div>

并在组件中设置displayVariable （例如ngOnInit）：

this.displayVariable = 'block';