关于angular5：Angular 5-指令ngClass和ngStyle innerHTML

Angular 5 - Directive ngClass and ngStyle innerHTML

我正在尝试动态更改指令样式/类。由于某些原因，当我使用ngStyle或ngClass更改innerHTML时，angular不会创建绑定。最终，我想做的是在我放置此指令的任何地方，我希望背景颜色根据服务变量进行更新。为简单起见，我创建了一个甚至不渲染我的硬编码ngStyle background-color的示例。

在示例中，我有一个简单的指令可以执行此操作，然后将其加载到应用程序组件上。我不明白为什么这条线不能使背景色变为绿色。

1	this.element.nativeElement.innerHTML = ` BG Color should be green. But its not. `;

这是堆叠闪电战：

https://stackblitz.com/edit/angular-xcgnmh

我想念什么？还是有更好的方法可以做到这一点？我尝试使用输出，查看了事件发射器，但它们没有帮助。

我认为您正在寻找的是@HostBinding。这里的工作示例：https://stackblitz.com/edit/angular-nzngy5?file=app/bgcolor.directive.ts。有关此主题的随机博客文章。

使用方式：

1	@HostBinding('style.background-color') color: string = 'green';

更多信息：

我不相信angular知道手动innerHTML的更改。我认为您要尝试做的是创建一个自定义指令，该指令本身会自动添加并配置ngStyle指令。尽管这是可能的，但目前做起来并非易事(至少有一个未解决的问题，尽管我无法立即找到它)。一个更大的问题是，如果您既向组件中添加了独立的ngStyle指令，又向您的自定义指令添加了代码，那么我认为您的实施策略会引起问题。与正确的主机绑定解决方案相比，这也是一个巨大的矫over过正。

此外，作为一个仅供参考：在angular上，您应始终避免直接使用ElementRef。当您使用提前编译或服务器端渲染或浏览器中未执行的许多其他技术时，这可能会导致问题。 Angular还不知道这些更改(除了主机绑定之外，另一种甚至不使用ElementRef手动更新元素样式的"较低级别"方法是使用Renderer2，或者很快， renderer3。这些方法对SSR友好)。