首页 > 解决方案 > 点击事件在 ionic 4 项目中不起作用

问题描述

我已经声明了一个静态变量,它包含 1 个包含一次点击事件的 html 代码。在单击事件上,我试图调用一个方法,该方法将在应用程序浏览器中打开链接。我已经在使用一个管道来显示消息,以绕过 Angular 提供的内置安全性。在浏览器控制台中没有显示错误,但我仍然无法单击包含单击事件的锚标记。

消息通知.page.ts

import { Component, OnInit } from '@angular/core';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

@Component({
  selector: 'app-messages-notifications',
  templateUrl: './messages-notifications.page.html',
  styleUrls: ['./messages-notifications.page.scss'],
})
export class MessagesNotificationsPage implements OnInit {

  myMsg = '';

  constructor() {
      this.myMsg = '<u><a (click)="openBrowserWindow("https://stackoverflow.com")">click here</a></u>';
  }

  ngOnInit() {
  }

  openBrowserWindow(text): void {  
    console.log("openBrowser called");     
    let browser = new InAppBrowser();
    browser.create(text, '_blank', 'location=yes')
  }
}

消息通知.page.html

<ion-content>
  <ion-card>
    <ion-item [innerHtml]="myMsg | safeHtml" class="ion-text-wrap"></ion-item>
  </ion-card>
<ion-content>

安全-html.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({
  name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }

}

来自浏览器的快照

标签: javascriptangulartypescriptionic-frameworkionic4

解决方案


您是否尝试使用(tap)而不是(click)


推荐阅读