HTMLファイルを角度2のテンプレートに読み込みますか？

Question

ng2-bs3-modalsを使ってAngular 2で動的モーダルを作成しようとしています。私は、メインコンポーネントのビューで使用されるセレクタに渡されるパラメータに基づいて、モーダルhtml本文テキストを動的に記入したいと思います。しかし、私はこのコードを使用すると、テキストとして私の全体の機能を扱うようだと私のモーダルは、ファイルの内容を表示する意図された動作ではなく、私の '関数decideModalContent'のコードを表示します。

私のコードはファイルの内容を返しません。文字列だけですが、Angular2/TypeScriptでファイルの内容を読み込む方法はまだわかりません。あなたがここに必要なもの

import { Component, Input } from 'angular2/core' 

@Component({ 
    selector: 'static-modal', 
    template: '{{modalBody}}' 
}) 


export class StaticModalComponent { 
    @Input() modalID; 
    template = 'app/shared/modals/static-message-1.html' 
    modalBody = function determineModalContent(modalID){ 
      if(modalID == "1") 
       return 'app/shared/modals/static-message-1.html'; 
      else if(modalID == "2") 
       return 'app/shared/modals/static-message-2.html'; 
      else 
       return 'app/shared/modals/static-message-default.html'; 
    } 
} 

Answer 1

はNG-含ま私は仮定をのようなものです。 Angularレポのissueにあるように、ほとんどの場合、その指示は得られません。私たちがこの指令を必要とするかどうか、また私たちがそれをどのように実装できるかについては、長い間議論がありました。

私はそれをどのように実装できるかの簡単な例を作りました。

@Component({ 
    selector: 'my-ng-include', 
    template: '<div #myNgIncludeContent></div>' 
}) 
export class MyNgInclude implements OnInit { 

    @Input('src') 
    private templateUrl: string; 

    @ViewChild('myNgIncludeContent', { read: ViewContainerRef }) 
    protected contentTarget: ViewContainerRef; 

    constructor(private componentResolver: ComponentResolver) {} 

    ngOnInit() { 
     var dynamicComponent = this.createContentComponent(this.templateUrl); 
     this.componentResolver.resolveComponent(dynamicComponent) 
      .then((factory: any) => this.contentTarget.createComponent(factory)); 
    } 

    createContentComponent(templateUrl) { 
     @Component({ 
      selector: 'my-ng-include-content', 
      templateUrl: templateUrl, 
      directives: FORM_DIRECTIVES, 
     }) 
     class MyNgIncludeContent {} 
     return MyNgIncludeContent ; 
    } 
} 

デモチェックの場合はPlunkerです。

Answer 2

テンプレートはその違いがない場合は、あなただけの同じhtmlファイルにすべての異なるボディを追加し、*ngIfディレクティブで表示するかを選択することができます

<modal> 
    <modal-header> 
    <h4 class="modal-title">Title</h4> 
    </modal-header> 
    <modal-body> 
    <div *ngIf='modalID == "1"'> 
     content1 
    </div> 
    <div *ngIf='modalID == "2"'> 
     content2 
    </div> 
    <div *ngIf='modalID != "1" && modalID != "2"'> 
     content3 
    </div> 
    </modal-body> 
    <modal-footer [show-default-buttons]="true"></modal-footer> 
</modal> 

Answer 3

それは」と中傷することができますあなたが見るアンダースコアを含めて、私が理解するいくつかの理由で、「verboten」が表示されますが、これはうまくいきます。事実、私はこれを非常に簡単に行う必要があります。私はそれを行うためのコードをたくさん書く必要はありません。私はこれは答えよりも役に立つが、いくつかは役に立つと思うかもしれない場合、私は得るHTMLなどをこすることができます。

コンポーネントAPI（ES6スタイル）では、クエリエントリを宣言します（または、TSを使用してViewChildを作成します）。これは、テンプレート参照変数などを持つ要素にマップする必要があります。私はここに示したようコンポーネントAPIのクエリの一部を使用してTSで正常に動作していることに注意してください：

// Assumes you have <div #targetdiv></div> in your component template 
    queries: { 
    targetDivRef : new ViewChild ('targetdiv') 
    } 

その後、いくつかのクリックハンドラで、oninitをまたはものは何でも（早すぎるCOMPのライフサイクルで、これを試してみません念頭に置いて）非同期にしたいページを取得し、divに内容をダンプします。

let elem = this.targetDivRef.nativeElement; 

    let svc = this.http.get ('./thepage.html') 
     .map (response => { return response [ '_body' ] }); 

    svc.subscribe (
     (x) => { elem.innerHTML = x }, 
     (err) => console.log (err), 
     () => console.log ('Complete') 
    ) 

また、「確実に」推奨されません。しかし、それは簡単で、うまくいきます。あなたは実際に購読する必要もなく、map funcのvalを設定することができます。これはちょっとだけ完了しました。

ng-includeに似たオプション（IMHOは目立ったものです）これを行うには3行のオプションが必要な場合は、スイッチを作成します。必要に応じてリクエストエラーなどを処理します。