我正在尝试动态更改指令样式/类。由于某种原因，当我使用 ngStyle 或 ngClass 更改 innerHTML 时，angular 不会创建绑定。最终，我想做的是放置此指令的任何位置，我希望背景颜色根据服务变量进行更新。为简单起见，我创建了一个示例，该示例甚至不呈现我的硬编码 ngStyle 背景色。
在示例中，我有一个简单的指令来执行此操作，并将其加载到应用程序组件上。我不明白为什么这条线不会使背景颜色变为绿色。
this.element.nativeElement.innerHTML = `<div [ngStyle]="{'background-color': 'green'}"> 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。关于主题here的随机博文。
像这样使用：
@HostBinding('style.background-color') color: string = 'green';
更多信息：
我不相信 Angular 知道手动 innerHTML 更改。我认为您正在尝试做的是创建一个自定义指令，该指令本身会自动添加和配置 ngStyle 指令。虽然这是可能的，但目前并不容易做到（至少有一个未解决的问题，尽管我无法立即找到它）。一个更大的问题是，我认为如果您将独立的 ngStyle 指令和自定义指令都添加到组件中，那么您的实施策略会导致问题。与正确的主机绑定解决方案相比，这也只是一个巨大的过度杀伤力。
另外，作为一个仅供参考：在 Angular 中，您应该始终避免直接使用 ElementRef。当您使用提前编译或服务器端渲染或许多其他不在浏览器中执行的技术时，它可能会导致问题。 Angular 也不知道这些更改（除了主机绑定，另一种甚至“更低级别”的手动更新元素样式而不诉诸 ElementRef 的方法是使用 Renderer2 或很快，渲染器3。这些方法是SSR 友好）。
【讨论】：
this.color = this.testService.backgroundColor 在指令初始化期间只执行一次。如果稍后将this.testService.backgroundColor 更新为新值，this.color 不会自动更新。 JavaScript 不能以这种方式工作。因此你需要 observables。