Question

当我试图建立这样的链接时：

    <a [href]="getUrl()">click me</a>

    getUrl() {
      return this.domSanitizer.bypassSecurityTrustUrl('http://sampleUrl.com');
    }

不可点击。我认为，当我将鼠标悬停在链接上时，我可以看到网址存在，但单击事件却没有。

是否使用消毒剂方法没有区别。

编辑：

我将为您提供其他背景信息。我只需要动态添加一些html。首先从以下位置开始：

<div [innerHTML]="getHtml()"

getHtml() {
return this.domSanitizer.bypassSecurityTrustHtml(html);
}

但是这样做会断开链接。您只能用ppm打开它。当我不使用bypassSecurityTrustHtml方法时，链接可以正常工作，但是大多数样式都无法实现...

现在，我也尝试过：

for (const el of this.div.nativeElement.getElementsByTagName('a')) {
   // that way 
   this.renderer.listen(el, 'click', () => {this.getUrl()});

  // or that way
   el.onclick = function (event) {
     window.open('http://testurl.com');
   };
}

，但效果不佳。

工作原理：

 // i'm not angular expert, i don't know why, but links are working with this 
 changeDetection: ChangeDetectionStrategy.OnPush

也可以通过这种方式来解决我的问题，但我不喜欢它：

 @HostListener('mouseup', ['$event'])
  onClick(event) {
    if(event.target && event.target.href) {
       window.open(event.target.href);
     }
  }

Answer 1

您可以进行以下更改-

HTML-

<a href="#" (click)="getUrl()">Click me</a>

TypeScript文件- -从平台浏览器导入DomSanitizer

从以下位置导入{DomSanitizer，SafeResourceUrl，SafeUrl} '@ angular / platform-browser';

成为Domsanitizer的实例

constructor(private domSanitizer: DomSanitizer) {}

调用您的方法

getUrl() {
      return this.domSanitizer.bypassSecurityTrustUrl('http://sampleUrl.com');
    }

Answer 2

我的最终解决方法：

  @HostListener('mouseup', ['$event'])
  onClick(event) {
    if (event.target && (event.target.href || event.target.closest('a')) && event.target.closest('.notificationHtmlDiv')) {
      const a = event.target.href ? event.target : event.target.closest('a');
      let target = a.target ? a.target : '_self';
      if(event.button === 1) {
        target = '_blank';
      }
      window.open(a.href, target);
    }
  }

似乎angular阻止了SafeHtml上的点击事件，因为当我尝试在div上添加onclick（外部动态添加的html块）时，它工作正常，但是当我对<a>标记执行相同操作时（内部动态添加了html），则根本不起作用。

如何在angular5中动态链接到外部站点？

2 个答案: