css - 将动态样式应用于 Angular 2 中注入(inject)的 HTML

Question

对于我正在处理的 Angular 元素，我将 HTML 注入(inject) <div>像这样:

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

htmlToInsert包含各种各样的东西，特别是 <a>标签。以前我们对所有这些标签进行样式化:

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

这很好用。但现在我需要在组件初始化期间根据来自其他地方的数据动态生成这些链接的颜色。我在 Angular 中看到的所有动态样式都需要您将内容直接应用到 HTML 标记，但我们这里没有它们可以使用。

我如何将动态样式应用于同样动态生成的 HTML？我能否以某种方式直接更改 CSS 类？在这里使用管道是正确的方法吗？还有其他我不知道的方法吗？如果绝对没有其他方法可以做到这一点，我也许可以重构代码。

Answer 1

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

// 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