如何拦截Ionic 3中的动态链接

Question

我正在搜索整个论坛和谷歌，我没有找到解决这个问题的方法。

我们有一个Ionic 2（现在3）应用程序，它将我们的软件（通信解决方案）与Android和IOS集成在一起。我很感激Ionic帮助我，当然。我的应用程序几乎从我们的主平台加载webservices（REST）并加载到应用程序中。

在这个特定的部分我有一个json内容加载，其中可以包含一些HTML功能。就像emoctions（没关系）和用户在发帖时输入的链接。这个链接基本上是http://www.example.com/profile/userid1，就像facebook功能（标记朋友）。

当我的应用程序运行时，应用程序尝试在浏览器中打开此链接，但我想拦截它们并使用NavController打开以在App中推送我的个人资料页面。

因此，我需要查看一个json变量（innerHTML）来查找此链接并将其拆分以获取Id并在我的App中打开，替换此外部点击。

我尝试了什么：

我试着在显示内部html之前使用replace进行处理

funReplaceMarkedUsers(text){
    return text.replace(/href=/gm, “(click)=funPushProfile()”);
}

离子似乎不理解这个实时变化并调用该功能。

我想如果我找到一种方法来拦截点击更好。就像是动态生成的我在放置一些点击功能之前无法更改此链接。

我发现了一些类似我的问题：http://intown.biz/2014/03/30/cordova-ionic-links-in-browser/2

但每种解决方案都使用Ionic 1。

无论如何。我不是那种在没有搜索所有情况的情况下请求帮助并且尝试了很多寻找解决方案的人，但似乎没有什么能帮到我。任何人都知道如何解决这样的问题？

我感谢您为我提供的任何帮助。

谢谢

Answer 1

home.ts

export class HomePage {
  appName = 'Ionic App';
  html ='<a href="https://plnkr.co" >Link</a>';

  constructor(public navController: NavController, public renderer: Renderer, private elRef:ElementRef) { }

  ionViewDidLoad() {
    let link = this.elRef.nativeElement.querySelector('a');
    let global = this.renderer.listen(link, 'click', (evt) => {
      console.log(link.getAttribute('href'));
      return false;
    })
  }
}

在模板中：

<ion-content padding>
  <div [innerHTML]="html"></div>
</ion-content>

Plnkr link