在新标签页中打开[innerHTML]绑定的Angular 6链接

凯特琳

我有一个Angular 6应用，该应用<div>通过[innerHTML]绑定填充。我target='_blank'该如何申请其中的所有链接div？

我尝试过的

到目前为止，我已经尝试创建一个包装div的指令，并在运行更改检测后，拉出一个子<a>标记列表并应用一个target='_blank'属性。到目前为止，我还无法ContentChildren访问任何链接：它只是拉出一个空列表。

有没有人有这样做的经验，还是有一个更优雅的解决方案？

@Directive({
  selector: '[appExternalLink]'
})
export class ExternalLinkDirective implements AfterContentChecked, AfterViewChecked {

  @ContentChildren('a', {descendants: true}) links: QueryList<any>;


  @Input() appExternalLink: string;
  constructor() {
    console.log('HELLO FROM APPEXTERNALLINK');
  }

  ngAfterContentChecked() {
    console.log(this.links);
  }

}

然后，在绑定内容时：

<div appExternalLink>
  <div [innerHTML]="content"></div>
</div>

凯特琳

事实证明，我在尝试使用错误的方法ContentChildren。

通过下面的代码，我能够使用指令将div中的所有 <a>标签作为目标appExternalLink。发布我的解决方案，这样其他人就不必自己搞清楚了：

  import { AfterViewChecked, Directive, ElementRef } from '@angular/core';

  @Directive({
    selector: '[appExternalLink]'
  })
  export class ExternalLinkDirective implements AfterViewChecked {
    constructor(private el: ElementRef) { }

    ngAfterViewChecked() {
      Array.from(this.el.nativeElement.querySelectorAll('a'))
        .forEach((el: any) => {
          el.setAttribute('target', '_blank');
        });
    }
  }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。