在角度2中动态加载HTML模板

概述我已经使用了包含AppComponent的angular-cli创建了一个项目，如下所示： import { Component } from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css' 我已经使用了包含AppComponent的angular-cli创建了一个项目，如下所示：

import { Component } from '@angular/core';@Component({  selector: 'app-root',templateUrl: './app.component.HTML',styleUrls: ['./app.component.CSS']})export class AppComponent {  Title = 'app works!';}

和app.component.HTML as

<h1>  Good Morning,{{Title}}</h1>

所以当我使用ng构建它生成一些这样的文件./dist/main.bundle.Js，其内容一些代码如下 –

/* 586 *//***/ function(module,exports) {module.exports = "<h1>\n  Good Morning,{{Title}}\n</h1>\n"/***/ },/* 587 */

这意味着，在编译时，编译器/ bundle-er正在读取HTML文件，并将它们连接到生成的Js文件中。

但在我的情况下，HTML也是从服务器端动态和内容驱动的。可以说，我的模板文件不是HTML，而是app.component.Jsp，而是驻留在一些不同的服务器或文件夹上。

此外，JsP文件有时返回< h1>早安，{{Title}}< / h1>
并且有时< h1> Good Afternoon，{{Title}}< / h1>取决于当前的服务器时间。

如何实现这个功能？

我所了解的是，我需要定义一些加载器函数说：loadDynamicTemplate(template_url)

并且需要在Component decorator模板属性上使用该loader功能。在这种情况下，当生成main.bundle.Js时，它也会使用该函数。所以在运行时角度会调用这个函数，并通过AJAX加载HTML并使用它。

更新1

Here我发现SystemJs和Webpack有一些区别。我也发现如果我们可以使用SystemJs，我们可以在运行时加载HTML文件。所以我相信这个问题可以通过SystemJs配置来解决。但是，另一个问题是发挥作用，虽然我认为这可能是一个单独的问题。所以我发布了一个新的问题来排除here。

可能如果这个问题得到解决，我会尝试使用SystemJs，然后在这里解决这个问题，如果它有帮助。

解决方法 你可以在我的模板组件中使用[INNERHTML]这样的东西(我没有测试)：

@Component({    selector: 'my-template',template: `<div [INNERHTML]="myTemplate"></div>`})export public class MyTemplate {    private myTemplate: any = "";    @input() url: string;    constructor(http: http) {        http.get("/path-to-your-Jsp").map((HTML:any) => this.myTemplate = HTML);    }}

总结

以上是内存溢出为你收集整理的在角度2中动态加载HTML模板全部内容，希望文章能够帮你解决在角度2中动态加载HTML模板所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。