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类吗？在这里使用管道是否正确？还有其他方法我不知道吗？如果绝对没有其他办法，我可以重构代码。

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

将动态样式应用于Angular 2中的注入HTML

1 个答案: