Question

我的应用程序的不同页面显示相同的静态文本。有没有办法可以在HTML文件中将此文本外部化，然后将这些文件包含在不同的角度组件中。

Answer 1

一种方式（真的不是最好的，因为潜在的安全漏洞）是使用Http加载你的html文件，然后将它们包含在你的StaticHTMLComponent中（html文件必须由网络服务器）。

@Component({
    selector: 'app-static-html',
    templateUri:'static-html.component.html'
})
export class StaticHTMLComponent {

    @Input() templatesUri: string[];

    constructor(private http: HttpService) {
    }

    loadTemplates(): Observable<string[]> {
        let templates: Observable<string>[] = [];
        this.templatesUri.forEach(uri => {
            templates.push(this.http.get(uri).map(res => res.text()));
        });
        return Observable.combineLatest(templates);
    }
}

使用此模板：

<div *ngFor="let template of loadTemplates() | async" [innerHTML]="template"></div>

警告

正如我在回答的开头所说，这可能会给你的代码增加安全漏洞，并且它有很多默认值。

首先，这将不允许您使用静态HTML加载css ，因为它只是为了加载HTML。

然后，会打开潜在的漏洞，因为如果您的某个静态HTML文件已损坏，那么您仍会加载它，没有任何问题。

Angular并不是为了提供静态HTML文件，这是一种解决方法，但最好的解决方案是使用您自己的Web服务器提供这些静态HTML文件，将它们与角度应用程序隔离开来。

如何在角度2分量中包含静态htmls

1 个答案:

警告