在新选项卡中打开由[innerHTML]绑定的Angular 6链接

Question

I have an Angular 6 app with a <div> that gets populated via an [innerHTML] binding. How can I apply target='_blank' to all the links inside this div ?

What I've tried:

So far, I've tried creating a directive that wraps the div and, after change detection gets run, pulls up a list of child <a> tags and applies a target='_blank' attribute. So far, I have not been able to get ContentChildren to access any of the links: It just pulls up an empty list.

Does anyone have experience doing this, or is there a more elegant solution?

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

}

Then, when binding the content:

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

Answer 1

You can use the <base> tag to default the target attribute of each anchor.

<base target="_blank">

You can inject this tag dynamically in ngOnInit and remove it in ngOnDestroy , but it will change the behaviour of any link.

If you want to change the behaviour of just the anchors inside a div, you can use

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

Answer 2

It turns out I was using the wrong approach trying to use ContentChildren .

With the below code, I was able to target all <a> tags in a div with the appExternalLink directive. Posting my solution so other people don't have to figure this out themselves:

  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

This is the selector you're using

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

What this does is look for any direct children of the component which have an id of a .

If you change your html to look like this:

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

Then your selector will find the links.