2017-02-14 140 views
1

有没有一种方法来包含一个外部html文件,我一直无法使用templateUrl,它不断追加基地的URL的开始。angular2包括外部html模板

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

它会尝试在"./http://blank.blank.com/somecool.html"

找到它并不能

+0

你可能会寻找[ComponentFactoryResolver](https://angular.io/ docs/ts/latest/cookbook/dynamic-component-loader.html),其中包含指向plnkr和可下载代码的链接。 – ccpizza

回答

2

我相信所有的templateUrl的是相对于应用程序的根,所以我不认为这会工作。

0

最后我用一刮工作得到新的HTML文件,然后addded一个服务器端包含命令在我的索引。 html文件来追加它们。

0

从'@ angular/core'导入{Directive,ElementRef,Input,OnInit}; 从'@ angular/http'导入{Headers,Http,Response};

@Directive({选择: 'ngInclude'}) 出口类NgIncludeDirective实现的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); 
     }); 
} 

}