2016-09-05 9 views
7

angular2でテンプレートを動的に読み込む方法はありますか? angular1では、ng-includeを使用して、メインコントローラービューに異なるhtmlテンプレートをロードしました。私はangular2が1つのtemplateUrlしか取ることができず、angular2でng-includeのグーグル・グーグルであり、参照を見つけることができないことを知っています。Angular2動的テンプレートまたはng-include

+1

['ngTemplateOutlet'](https://angular.io/docs/ts/latest/api/common/index/NgTemplateOutlet-directive.html)ですが、探しているものとまったく同じようには聞こえません。別の方法は、実行時にコンポーネントをコンパイルすることです。 –

+0

あなたはこの解決策を試すことができます:http://stackoverflow.com/questions/33749994/dynamic-template-in-templaturl-in-angular2?answertab=votes#tab-top –

答えて

4

ダイナミックテンプレートについてはわかりませんが、ダイナミックコンポーネントを挿入することができます(コースのテンプレートは異なります)。最新の例にAngular2: Insert a dynamic component as child of a container in the DOM

アンが、より複雑なはここで見つけることができます:

単純な例が、非推奨はここで見つけることができますあなたが作ることができるときあなたはNG-含まが必要なのか、なぜHow can I use/create dynamic template to compile dynamic Component with Angular 2.0?

1

htmlをカスタムの新しいコンポーネントとして使用し、セレクタタグのおかげでどこでもそれを使用できます。

例:だからここ

@Component({ 
     selector: 'app-my-component', 
     templateUrl: './my-component.component.html' 
    }) 

は、my-component.component.htmlファイルが含まれたり、他のどこにでも表示したいマークアップを持つことができます。 とセレクタタグの値<app-my-component></app-my-component>は、アプリケーションのマークアップHTMLファイル全体で使用できます(毎日のHTMLタグと考えることができますが、高度にカスタマイズされ、角度フレームワークで最初に解釈されるカスタムタグですが、

+0

この事を試しましたが、コンソールエラーが来ていますタグ正しく終了していません。 header.htmlにhtml開始タグを追加し、footer.html –

+0

に終了タグを追加すると、のようなものがindex.htmlにあります。 <....あなた自身のフッター>

+0

このアイデアは良いです。私はヘッダーとフッターの2つの別々のコンポーネントを作ってみて、フッタHTMLからタグを削除しました。その正常に動作しますが、IEブラウザではうまくいかない場合があります。 –

関連する問題