在Angular2中动态加载HTML模板

我使用创建了一个项目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!';
}

And 应用程序组件.html as

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

所以当我用它构建它时ng build它会生成一些像这样的文件./dist/main.bundle.js其中包含一些代码如下-

/* 586 */
/***/ function(module, exports) {

module.exports = "<h1>\n  Good Morning, {{title}}\n</h1>\n"

/***/ },
/* 587 */

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

但就我而言，html 也是dynamic以及服务器端的内容驱动。可以说，我的模板文件不是 html，而是应用程序组件.jsp并完全驻留在某个不同的服务器或文件夹上。

该 JSP 文件有时也会返回<h1>Good Morning, {{title}}</h1>有时<h1>Good Afternoon, {{title}}</h1>取决于当前服务器时间。

如何实现这个功能呢？

我的理解是，我需要定义某种加载器函数：loadDynamicTemplate(template_url)

并且需要在组件装饰器模板属性上使用该加载器函数。在这种情况下，当生成 main.bundle.JS 时，它也会使用该函数。所以在运行时，Angular将调用这个函数并通过ajax加载HTML并使用它。

Update 1

Here https://stackoverflow.com/questions/38263406/what-are-differences-between-systemjs-and-webpack我发现 SystemJS 和 Webpack 之间存在一些差异。我还发现，如果我们可以使用 SystemJS，我们就可以在运行时加载 HTML 文件。所以我相信这个问题可以通过SystemJS配置来解决。但为此另一个问题开始发挥作用，尽管我认为这可能是一个单独的问题。所以我发布了一个新问题来解决这个问题here https://stackoverflow.com/questions/42417832/configure-angular-cli-to-use-systemjs.

如果这个问题得到解决，我可能会尝试使用 SystemJS，然后在此处发布解决方案（如果有帮助的话）。

您可以在my-template具有类似这样的组件（我没有测试）：

@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);
    }
}