Angular 在Ionic 3中，如何在系统浏览器中打开动态获取的HTML中的所有链接？

我正在制作一个基于以下内容的Ionic应用程序，它与WP Rest API一起工作

有一个页面将帖子列表作为一个对象数组加载，该对象包含由Wordpress呈现的帖子HTML

Wordpress服务摘录

Wordpress Posts组件的摘录 然后将呈现的HTML插入DOM中

Worpress Post HTML的摘录
在系统浏览器（Chrome或Safari）中打开链接，而不是在应用浏览器中打开链接，或者更糟的是，在应用程序内部打开链接

在AngularJS中，我本可以使用
$compile
，但因为在Angular4中，我不知道有什么替代方法。在将该HTML代码放入DOM之前，有没有办法手动调用该HTML代码上的Angular模板编译器？或者有没有其他方法可以在系统浏览器中打开该HTML中的所有链接？
使用一个试验性WebApi的
DOMParser
怎么样。您可以解析html，然后将其推送到视图中（可能在
NgZone
）。您可以在以下内容中找到基本示例：

然后提取锚定标记：

let aElements = doc.getElementsByTagName("a");
for (let i = 0; i < aElements.length; i++) {
  console.log(aElements[i].innerHTML);
}

你必须玩弄代码，我还没有测试过这段代码，但它应该可以工作。使用手势，可以绑定任何本机事件。看看这个youtube

另一个选项是创建全局事件侦听器并在系统浏览器中打开链接。但要绕过iOS，您需要使用iApp浏览器。
在
index.html

document.body.addEventListener('click', function (event) {
          if(event.srcElement.target == '_system' || event.srcElement.target == '_blank') {
              var url = this.href;
              window.open(url,"_system");
          }
  });

将目标属性添加到链接应该可以工作

<a target="_system" href="http://www.stackoverflow.com">Stack Overflow</a>

Angularjs内置了jquery，所以您可以尝试像下面这样附加事件处理程序吗

$('a').on('click', function(evt) {
  evt.preventDefault();
  var link = $(this).attr('href');
  window.open('link');
});

您可以在将html嵌入ajax回调甚至init后附加它。
这有什么帮助？我已经可以访问所有
a
元素，问题是如何添加一个角度
（单击）
属性，该属性能够调用控制器中定义的函数？@KiJéy检查我更新的答案。使用手势，您可以绑定事件。问题是，仅在链接上添加
target=“\u system”
是不起作用的。在将代码注入我的目标
div
之前，我已经通过regExp尝试过了，我需要通过
（单击）
（Angular2的ng单击）@KiJéy在全局文件中定义此代码，即
index.html
。我试过这个，它对我有效，但我在爱奥尼亚1项目中试过。因为它的JavaScript，所以对于ionic 2或3应该是相同的。制作一个演示项目并在github或JSFIDDLE上共享会很有帮助。在这里发布之前，我尝试了第二种解决方案（我不知道如果我通过jQuery执行，它是否会有所改变）。我在
脚本
标记中添加了JS，标记周围环绕着
window.addEventListener（'load'，function（）{…}）它不起作用，链接一直在我的Ionic应用程序或InApp浏览器中打开，而不是在系统浏览器中打开。为什么动态编译角度模板是一种糟糕的做法？它不是比简单地在目标div中注入来自服务器的HTML代码，完全绕过角度模板引擎更干净吗？在将HTML注入
div
之前，请确定是否有方法
$compile（）
一些HTML，这正是我想要的解决方案after@KiJ是的，我不知道这是否是一个糟糕的做法，但你可能必须在你的应用程序中包括Angular编译器。这将增加你的应用程序大小。我觉得你的处境太琐碎了，不能用那种解决办法。至于为什么解决方案不起作用，您确定窗口加载脚本运行吗？因为它应该只在页面加载时运行。不是子DOM树。为了更清楚，我更新了我的问题。另外，您能再向我解释一下您使用
@HostListener
的解决方案吗？我应该把代码放在哪里？Thanks@KiJéy
（点击）
是一个有角度的东西，就像我的指令一样。您的模板需要由Angular编译，才能使Angular的东西正常工作。我不知道一个简单的方法。但是您可以使用
（单击）
，而不是使用
onclick
，它是一个纯HTML属性，具有如下全局函数：
函数openLink（）{window.open（event.target.href，'.'u system'）；返回false；}
是，但我忘了询问您是否在项目中导入jquery，否则，您也可以用纯javascript编写相同的代码。这对动态元素不起作用，因为
a
将在以后添加……您需要事件委托……看看这个角度的生命周期
var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingHTMLSource, "text/html");

let aElements = doc.getElementsByTagName("a");
for (let i = 0; i < aElements.length; i++) {
  console.log(aElements[i].innerHTML);
}

for (let i = 0; i < aElements.length; i++) {
      this.pressGesture = new Gesture(aElements[i].innerHtml);
        this.pressGesture.listen();
        this.pressGesture.on('press', e => { 
            console.log('testing');
        });
}

document.body.addEventListener('click', function (event) {
          if(event.srcElement.target == '_system' || event.srcElement.target == '_blank') {
              var url = this.href;
              window.open(url,"_system");
          }
  });

<a target="_system" href="http://www.stackoverflow.com">Stack Overflow</a>

<div #dynamic></div>

export class MyPage {
  @ViewChild('dynamic') dynamic: ElementRef;

  constructor() {
    setTimeout(() => {
      let text = '<a href="http://www.stackoverflow.com">Stack Overflow</a>';

      let el = this.dynamic.nativeElement as HTMLElement;
      el.innerHTML = text;
      let arrayOfLinks = el.querySelectorAll('a');;
      for (let i = 0; i < arrayOfLinks.length; i++) {
        let anchor = arrayOfLinks[i];
        anchor.onclick = function(ev) {
          window.open(anchor.href, '_system');
          ev.preventDefault();
          return false;
        };
      };
    }, 1000);
  }

}

export class MyPage {
  @ViewChild('dynamic') dynamic: ElementRef;

  constructor() {
    setTimeout(() => {
      let text = '<a onclick="openInNewBrowser()" href="http://www.stackoverflow.com">Stack Overflow</a>';

      let el = this.dynamic.nativeElement as HTMLElement;
      el.innerHTML = text;
    }, 1000);
  }

window['openInNewBrowser'] = function () {
  let anchor = event.target;
  window.open(anchor['href'], '_system');
  event.preventDefault();
  return false;
}

$('a').on('click', function(evt) {
  evt.preventDefault();
  var link = $(this).attr('href');
  window.open('link');
});