Question

我正在尝试动态更改指令样式/类。出于某种原因，当我使用ngStyle或ngClass更改innerHTML时，angular不会创建绑定。最后我想做的是无论我在何处放置此指令，我都希望基于服务变量更新背景颜色。为了简单起见，我创建了一个甚至不能渲染我的硬编码ngStyle背景颜色的例子。

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

  this.element.nativeElement.innerHTML = `<div [ngStyle]="{'background-color': 'green'}"> BG Color should be green. But its not.  `;

这是stackblitz：

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

我错过了什么？或者有更好的方法来做到这一点？我尝试过使用输出，查看事件发射器，但他们没有帮助。

Answer 1

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

用过：

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

更多信息：

我不相信angular知道手动innerHTML更改。我认为你正在尝试做的是创建一个自定义指令，它本身会自动添加和配置ngStyle指令。虽然这是可能的，但目前做起来并不容易（至少有一个关于它的公开问题，尽管我无法立即找到它）。一个更大的问题是，如果您向组件添加了独立的ngStyle指令以及自定义指令，我认为您的实现策略会导致问题。与正确的主机绑定解决方案相比，它也只是一个巨大的过度杀伤。

另外，作为一个FYI：在角度你应该总是避免直接使用ElementRef。当您提前使用编译或服务器端呈现或许多其他不在浏览器中执行的技术时，它可能会导致问题。 Angular也没有意识到这些变化（除了主机绑定，另一个甚至是＃34;较低级别＆＃34;手动更新元素的样式而不诉诸ElementRef的方法是使用{ {3}}或者很快，renderer3。这些方法是SSR友好的。）

Angular 5 - 指令ngClass和ngStyle innerHTML

1 个答案: