Question

我是一个从REST服务中提取HTML内容的Ionic 2应用程序。该内容以通常的HTML内容显示给用户：parragraphs，富文本等。

点击内容中的某些链接会使应用显示新的应用页面（即在NavController中推送页面）。

使用应用程序内部的固定内容非常简单：

在模板中

Bla bla bla <a href="/specialPage/someId" (click)="pushSpecialPage($event, 'someId')">link text</a> bla bla bla.

在组件类中：

pagePush(event, destiny: string) {
  this.navCtrl.push(SpecialPage, { contentId: destiny });
  }
}

鉴于SpecialPage是离子2页组件。

问题是我的内容来自服务，当我使用[innerHTML]=插入内容时，内容不会被处理为Angular2内容。

那么，我怎么不能对使用服务提取的内容中的点击做出反应？

我的想法是：

检测应处理的链接并向其添加角度代码以作出反应（可能是(click)），然后以某种方式编译代码并将其插入模板中。
使用自定义协议（例如，href =＆＃34; specialPage：// someId＆＃34;）并拦截用户点击这些链接。一旦点击被Angular2拦截，将正确的页面推送到NavController。

我不知道这些方法中的任何一种是否有效以及如何实施它们。我对第一个解决方案有疑问，因为阅读Angular 2博文Angular 2 RC5 - NgModules, Lazy Loading and AoT compilation后说：

从一开始，Angular 2的部分设计就是启用这个过程提前发生（AoT） - 也就是说，作为构建步骤，在构建应用程序时。大约60％的Angular代码大小是执行此操作的编译器，因此启用AoT编译意味着您不必将该代码发送给您的用户，这会产生巨大的代码通过电线节省字节数。

似乎没有编译器代码被推送给客户端，因此无法动态编译。

Answer 1

解决方案是将click侦听器应用于组件。处理程序应检查clicked元素是否为锚点，并且href指向内部页面。如果是，请调用NavController。

例如，假设您知道false形式的所有链接都应指向内部应用页面。

在您的组件中导入href="/myInternalPage/pageId"和ElementRef。然后，使用两者，设置一个单击侦听器：

Rederer

现在每次点击都由constructor(public navCtrl: NavController, elementRef: ElementRef, renderer: Renderer) { // Listen to click events in the component renderer.listen(elementRef.nativeElement, 'click', (event) => { var rc: boolean = true; if (event.target.nodeName == 'A') { rc = this.processClickOnATag(event.target.href); } return rc; }) }功能处理。

处理程序代码：

processClickOnATag

取消事件冒泡需要返回代码（如果不是WebView将尝试按照链接，破坏应用程序）。

最后，processClickOnSpecialPageLink函数代码：

processClickOnATag(href: string): boolean {
  var rc: boolean = true;
  var pos: number;
  if ((pos = href.indexOf('/myInternalPage/')) !== -1) {
    rc = this.processClickOnSpecialPageLink(href.substring(pos))
  }
  return rc;
}

您可以为链接添加特殊属性，以避免处理href（容易出错）。例如，您可以private processClickOnSpecialPageLink(pageRef: string): boolean { var rc: boolean = true; var refParts = pageRef.split('/'); // Check this is actually an special page. if (refParts[1] === 'myInternalPage') { this.navCtrl.push(MySpecialPage, { pageId: refParts[2]}); rc = false; } return rc; }，以便您可以检测到特殊页面链接（add data-special-page="specialPageId"标记是否包含a？）并且只在一个属性中包含ID。

对Ionic2 / Angular2应用中服务提供内容中的链接的点击做出反应

1 个答案: