有没有一种方法来包含一个外部html文件,我一直无法使用templateUrl,它不断追加基地的URL的开始。angular2包括外部html模板
@Component({
selector: 'enroll-header',
templateUrl: 'http://blank.blank.com/somecool.html'
})
它会尝试在"./http://blank.blank.com/somecool.html"
找到它并不能
有没有一种方法来包含一个外部html文件,我一直无法使用templateUrl,它不断追加基地的URL的开始。angular2包括外部html模板
@Component({
selector: 'enroll-header',
templateUrl: 'http://blank.blank.com/somecool.html'
})
它会尝试在"./http://blank.blank.com/somecool.html"
找到它并不能
不支持在templateURL中使用外部URL(可能是因为它使您面临安全风险)。作为一种解决方法,您可以在模块中使用绑定到并显示单个变量的组件。然后你可以设置变量等于你想渲染的html。请检查这两个相似的,所以问题:
我相信所有的templateUrl的是相对于应用程序的根,所以我不认为这会工作。
最后我用一刮工作得到新的HTML文件,然后addded一个服务器端包含命令在我的索引。 html文件来追加它们。
从'@ 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);
});
}
}
你可能会寻找[ComponentFactoryResolver](https://angular.io/ docs/ts/latest/cookbook/dynamic-component-loader.html),其中包含指向plnkr和可下载代码的链接。 – ccpizza