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。请检查这两个类似的SO问题：

Answer 2

我相信所有的templateUrl都与你的应用程序的根相关，所以我认为这不会起作用。

Answer 3

我最终使用scrape作业来获取新的html文件，然后在我的index.html文件中添加了一个serveride include命令来附加它们。

Answer 4

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';

@Directive({ selector: 'ngInclude' })
export class NgIncludeDirective implements 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() {
    //Loads the HTML and bind it to the view
    this.
        http.
        get(this.templateUrl).
        map(res => this.parseTemplate(res)).
        catch(this.handleTempalteError.bind(this)).subscribe(res => {
            console.log(res);
        });
}

}

angular2包括外部html模板

4 个答案: