在Angular 2中对注入的HTML应用动态样式

Question

针对我的一个Angular项目，我正在将HTML注入到<div>中，步骤如下：

<div class="myClass" [innerHTML]="htmlToInsert"></div>

htmlToInsert 包含各种元素，特别是 <a> 标签。以前我们对所有这些标签进行如下样式设置:

.myClass ::ng-deep a {
  color: #f00;
  text-decoration: none;
}

这之前的做法是有效的。但现在我需要在组件初始化时根据来自其他地方的数据动态生成这些链接的颜色。Angular中所有的动态样式都需要直接应用到HTML标签上，但我们没有标签可以使用。

我该如何为动态生成的HTML应用动态样式？ 我能直接更改CSS类吗？在这里使用管道是否是正确的方法？还有其他我不知道的方法吗？如果绝对没有其他方法，我可能需要重构代码。

- TheSoundDefense

---

你能否修改htmlToInsert中的数据并将颜色作为内联样式添加进去？<a style="color: yourDynamicColor"></a> - LLai

@LLai 我可以使用管道进行修改。 - TheSoundDefense

你如何获取htmlToInsert？你能否在你的component.ts代码中编辑该值？ - LLai

@LLai 我可以这样做，但那将是一个相当不专业的解决方案，而且我已经被建议不要这样做。 - TheSoundDefense

你需要遵循的简单解决方案是 https://dev59.com/xFoV5IYBdhLWcg3wa-Qo#57973805 - Sahil Ralkar

可能是Angular 2 - innerHTML styling的重复问题。 - Sahil Ralkar

Answer 1

如果您无法修改传入的innerHTML，则可以通过自定义指令实现此功能。基本上，您将使用自定义指令标记包含innerHTML的div。然后，该指令会查找其中的任何锚点，并根据输入更改颜色。

// component.html
<div anchorColor [color]="dynamicColor" [innerHTML]="htmlToInsert"></div>

// directive.ts
@Directive({selector: '[anchorColor]'})
export class AnchorColorDirective implements OnAfterViewInit {
    @Input() color: string;

    constructor(private el: ElementRef){
    }

    // afterViewInit lifecycle hook runs after DOM is rendered
    ngAfterViewInit(){
        // get anchor element
        let anchorEl = this.el.nativeElement.querySelector('a');
        // assign color
        if(anchorEl){
            anchorEl.style.color = this.color;
        }
    }
}

这里有一个可用的 Plunkr https://plnkr.co/edit/QSYWSeJaoUflP94Cy4Hm?p=preview

- LLai

---

哇，这看起来非常有用。我会尝试实现它，如果我们能让它工作，我会回来将这个答案标记为正确的。谢谢！ - TheSoundDefense

此外，这似乎是您可以通过接受标签（或类或其他）作为附加参数来进一步概括的内容。 - TheSoundDefense

@TheSoundDefense 当然可以！如果你有一组固定的标签/颜色，你可以传递一个类来避免使用内联样式。 - LLai

这确实起作用了，但最终我们决定在另一层进行更改以获得更高的效率。不过，知道人们能做到这一点还是很好的。 - TheSoundDefense

@TheSoundDefense 很高兴听到这个消息。我同意，如果可能的话，在不同的层级上编辑HTML更为优化。但这是一个不错的技巧。 - LLai