javascript - 在新选项卡中打开由 [innerHTML] 绑定(bind)的 Angular 6 链接

Question

我有一个带有 <div> 的 Angular 6 应用程序通过 [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);
  }

}

然后，在绑定(bind)内容时:

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

Answer 1

事实证明我在尝试使用 ContentChildren 时使用了错误的方法.

使用下面的代码，我能够定位所有 <a>带有 appExternalLink 的 div 标签指示。发布我的解决方案，这样其他人就不必自己解决这个问题了:

  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');
        });
    }
  }