javascript - Öppna Angular 6-länkar bundna av [innerHTML] i en ny flik

Jag har en Angular 6-app med en <div> som fylls via en [innerHTML]-bindning. Hur kan jag applicera target='_blank' på alla länkar inne i denna div?

Vad jag har försökt:

Hittills har jag försökt skapa en direktiv som omsluter div:en och, efter att ändringsdetektering körts, hämtar en lista över barn-<a>-taggar och applicerar ett target='_blank'-attribut. Hittills har jag inte kunnat få ContentChildren att komma åt någon av länkarna: det hämtar bara upp en tom lista.

Har någon erfarenhet av att göra detta, eller finns det en mer elegant lösning?

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

}

Sedan, när du binder innehållet:

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

Svar #1

Det visar sig att jag använde fel tillvägagångssätt när jag försökte använda ContentChildren.

Med koden nedan kunde jag rikta in mig på alla <a>-taggar i en div med appExternalLink-direktivet. Jag postar min lösning så att andra inte behöver lista ut detta själva:

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

Svar #2

Du kan använda <base>-taggen för att ange standardvärdet för target-attributet för varje ankare.

<base target="_blank">

Du kan injicera denna tagg dynamiskt i ngOnInit och ta bort den i ngOnDestroy, men det kommer att ändra beteendet för vilken som helst länk.

Om du vill ändra beteendet hos enbart länkarna inne i en div kan du använda

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

Relaterade artiklar