Ionic2/Angular2アプリのサービス提供コンテンツ内のリンクのクリックに反応する

Question

RESTサービスからいくつかのHTMLコンテンツを取得するIonic 2アプリケーションがあります。そのコンテンツは、通常のHTMLコンテンツ（パラグラフ、リッチテキストなど）としてユーザーに表示されます。

コンテンツ内の一部のリンクをクリックすると、新しいアプリケーションページが表示されるはずです（NavController ）。アプリ内に固定されたコンテンツに

が、これは非常に簡単です：テンプレートで

コンポーネントクラスで

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

：SpecialPageはイオン2ページの構成要素であることを考えると

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

。

問題は、私のコンテンツはサービスから来て、[innerHTML]=を使って挿入すると、コンテンツはAngular2コンテンツとして処理されません。

サービスを使用して取得されたコンテンツのクリックにはどのように反応できませんか？

私の考えは以下のとおりです。

• 処理されるべきリンクを検出し、反応するようにそれらに（おそらく(click)）の角度のコードを追加して、何とかコードをコンパイルし、テンプレートに挿入します。

• カスタムプロトコル（たとえば、href = "specialPage：// someId"）を使用して、これらのリンクに対するユーザーのクリックを傍受します。クリックがAngular2で傍受されたら、適切なPageをNavControllerにプッシュします。

これらのアプローチのいずれかが有効かどうか、またその実装方法はわかりません。

を当初から、角度2の設計の一部は、事前に（IBMアカデミー）の発生する にこのプロセスを可能にするためだった - ということ：それは言われていますAngular 2 RC5 - NgModules, Lazy Loading and AoT compilation角度2ブログ記事を読んだので、私は最初の解決策に疑問をしました構築ステップとして、アプリケーションをビルドするときは です。 Angularのコードサイズの約60％は です。この作業を行うコンパイラであるため、AoTコンパイルを有効にすると というコードがユーザに出荷される必要はありません。

コンパイラコードがクライアントにプッシュされていないようだので、オンザフライでコンパイルすることはできません。

Answer 1

解決策は、コンポーネントにクリックリスナーを適用することです。ハンドラは、クリックされた要素がアンカーであり、hrefが内部ページを指すかどうかをチェックする必要があります。はいの場合は、NavControllerを呼び出します。

たとえば、href="/myInternalPage/pageId"の形式のリンクはすべて、内部のアプリケーションページを指しているはずです。

コンポーネントのインポートElementRefとRedererです。今、すべてのクリックがprocessClickOnATag機能によって処理される

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(href: string): boolean { 
    var rc: boolean = true; 
    var pos: number; 
    if ((pos = href.indexOf('/myInternalPage/')) !== -1) { 
    rc = this.processClickOnSpecialPageLink(href.substring(pos)) 
    } 
    return rc; 
} 

（WebViewのアプリを破る、リンクをたどってヨーヨーをしようとしていない場合）リターンコードはイベントバブルをキャンセルするために必要とされます。あなたが（エラーを起こしやすい）の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; 
} 

：最後に

、processClickOnSpecialPageLink機能コード。たとえば、add data-special-page="specialPageId"とすると、特別なページリンクを中間で検出することができます（aタグにはdata-special-page attributeが入りますか？）、idは1つの属性のみになります。