angular2には外部HTMLテンプレートが含まれています

Question

外部HTMLファイルを含める方法はありますか？templateUrlを使用できませんでした。

@Component({ 
    selector: 'enroll-header', 
    templateUrl: 'http://blank.blank.com/somecool.html' 
}) 

それは"./http://blank.blank.com/somecool.html"

でそれを見つけようと

Answer 1

templateURLで外部URLを使用することはサポートされていません（セキュリティリスクにさらされる可能性があるため）。回避策として、単一の変数にバインドして表示するコンポーネントでテンプレートを使用できます。次に、変数をレンダリングするhtmlと等しく設定できます。これら2つの同様のSOの質問を確認してください：

• Dynamically load HTML template in angular2
• How to load external html page in ionic2

Answer 2

に失敗し、私はtemplateUrlのすべては、あなたのアプリケーションのルートに相対的なものと考えているので、私はこれがうまくいくとは思いませんよ。

Answer 3

私は新しいhtmlファイルを取得するためにこすりジョブを使用して終了した後、サーバー側が私のインデックスにコマンドを含めるaddded。 htmlファイルを追加します。

Answer 4

'@ angular/core'の{Directive、ElementRef、Input、OnInit}をインポートします。 '@ angular/http'から{Headers、Http、Response}をインポートします。

@Directive（{セレクタ 'ngInclude'}） エクスポートクラスNgIncludeDirectiveあなたは、[ComponentFactoryResolver（https://angular.io/を探しているかもしれないのOnInit {

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

constructor(private element: ElementRef, private http: Http) { 

} 
parseTemplate(res: Response) { 
    if (this.type == 'template') { 
     this.element.nativeElement.innerHTML = res.text(); 
    } else if (this.type == 'style') { 
     var head = document.head || document.getElementsByTagName('head')[0]; 
     var style = document.createElement('style'); 
     style.type = 'text/css'; 
     style.appendChild(document.createTextNode(res.text())); 
     head.appendChild(style); 
    } 
} 
handleTempalteError(err) { 

} 
ngOnInit() { 
    this. 
     http. 
     get(this.templateUrl). 
     map(res => this.parseTemplate(res)). 
     catch(this.handleTempalteError.bind(this)).subscribe(res => { 
      console.log(res); 
     }); 
} 

}