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

Question

我正在基于以下Ionic Wordpress App Template 制作一个可与 WP Rest API 配合使用的 Ionic 应用程序。

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

Wordpress Service 的摘录

let url = this.config.wordpressApiUrl + `/wp/v2/posts?${query}&_embed`;
return this.http.get(url)
    .map(result => {
        return result.json();
    });

Wordpress Posts Component 的摘录

export class WordpressPosts implements OnInit {

    posts: any;
    //...
    ngOnInit() {
        this.wordpressService.getPosts()
            .subscribe(
                result => this.posts = result
            );
    }

然后将呈现的 HTML 插入到 DOM 中

Worpress Post HTML 的摘录

<ion-card text-wrap *ngIf="post.content.rendered">
    <p id="postContent" padding [innerHtml]="post.content.rendered"></p>
</ion-card>

我希望将 innerHTML (post.content.rendered) 中的所有链接都用 (click)="openLink($1)" 替换为 openLink() 函数：

openLink(url) {
    window.open(url, '_system');
}

它非常适合在系统浏览器（Chrome 或 Safari）中打开链接，而不是在 InAppBrowser 或更糟糕的情况下，在替换它的应用程序内部。

在 AngularJS 中，我本可以使用 $compile，但因为在 Angular 4 中我不知道有任何替代方法。有没有办法在将 HTML 代码放入 DOM 之前手动调用该 HTML 代码上的 Angular 模板编译器？还是有其他方法可以在系统浏览器中打开该 HTML 中的所有链接？

Answer 1

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

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

如果它不起作用，你有两个额外的选择，而无需编译 Angular。

两个选项的 HTML：

<div #dynamic></div>

选项 1

拥有一组锚元素并将 onclick 事件分配给所有元素。

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

}

选项 2

拥有一个全局 onclick 处理程序并将 HTML 上的 onclick 分配给锚元素。

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

Answer 2

您如何使用DOMParser，它是一个实验性的 WebApi。您可以解析 html，然后将其推送到查看（可能在 NgZone 中）。您可以在MDN 中找到基本示例：

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

所以基本上一旦您可以访问a 元素，您就可以更改其属性。 例如要附加一个新闻事件（你必须尝试点击事件，我只尝试过从组件按下），请遵循：

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

您必须使用代码，我没有测试过此代码，但它应该可以工作。使用手势，您可以绑定任何原生事件。检查这个 youtube video。
其他选项是创建全局事件侦听器并在系统浏览器中打开链接。但是要解决 iOS，您需要使用 InAppBrowser。 安装InAppBrowser，在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");
          }
  });

Answer 3

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

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

您可以在将 html 嵌入到 ajax 回调甚至 init 中后附加它。