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

}

然后，在绑定内容时：

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

Answer 1

您可以使用<base>标记来默认每个锚点的target属性。

<base target="_blank">

您可以在ngOnInit中动态注入此标签，并在ngOnDestroy中将其删除，但这会更改 any 链接的行为。

如果您只想更改div中锚点的行为，则可以使用

Array.from(document.querySelectorAll('.your-div-class a'))
  .forEach(el => el.setAttribute('target', '_blank'))

Answer 2

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

使用以下代码，我可以使用<a>指令在div中定位 all 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');
        });
    }
  }

Answer 3

这是您正在使用的选择器

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

这是查找ID为a的组件的所有 direct 子级。

如果您将html更改如下：

<div appExternalLink>
    <a #a>Link</>
    <a #a>Link</>
</div>

然后您的选择器将找到链接。

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

3 个答案: