動的HTML評価：HTML文字列に

を表示します。Ionic2アプリケーションでは、<ion-icon>をHTML文字列に含めたいと考えています。 HTML文字列は、次の行に沿ったものになります。動的HTML評価：HTML文字列に

public explanation = "To open the menu, click the <ion-icon name='menu'></ion-icon> icon to the top left.";

文字列は翻訳ファイルに格納されます。

<p [innerHTML]="explanation"></p>

問題：今<ion-icon>コードがエスケープされていませんが、アイコンがレンダリングされません出力されたとき、私は、HTML文字列は、デフォルトでエスケープされていると私はサニタイズを防ぐために、出力に文字列をしようとしたことを知っていますいずれか（たとえノードがDOMに存在していても）。 <b>タグのような通常のHTMLを使用すると、コードはうまく機能します。

動的テンプレート評価？

私は、コードがDOMに直接挿入され、Ionic/Angularで評価されないという事実が原因であると考えます。 Angular1にはlarge discussion here on SOがあります。 Angular2のソリューションこれまでのところ、the deprecated DynamicComponentLoaderまたはare fairly complexを使用しています。

easy解決方法アイコンが表示されますか？ 2つの翻訳文字列...LEFT_OF_ICONと...RIGHT_OF_ICONを定義すると、この場合はうまくいくが、やや面倒だと感じる。

出典

2016-08-29 Fabian Keller

アングル処理HTMLは、プレーンHTMLとして[innerHTML]="..."を使用して追加され、それを処理せずに（バインディング、ディレクティブまたはコンポーネントのインスタンス化ではなく）DOMに追加するだけです。

代わりにViewContainerRef.createComponent()を使用できます。

たとえば、Angular 2 dynamic tabs with user-click chosen componentsを参照してください。

出典

2016-08-29 13:47:12

リンクされた答えに記載されているPlunkerでは、特定のコンポーネントのコンポーネントファクトリを渡す必要があることがわかります： 'this.viewContainerRef.createComponent（this.componentFactory、0）;'。この場合、コンポーネントはHTML文字列の中でそのタグとともに使用されますが、私はこのアプローチを単純に使用することはできません。 –

CSSセレクタをサポートしていますが、実際の例は見ていません。テンプレートにそのHTMLを含むコンポーネントを作成し、そのコンポーネントを動的に追加する必要があります。これは関連するかもしれませんhttp://stackoverflow.com/questions/36008476/how-to-realize-website-with-hundreds-of-pages-in-angular2 –

動的HTML評価：HTML文字列に

答えて

関連する問題