在angular2中动态加载HTML模板 [英] Dynamically load HTML template in angular2

问题描述

我使用 angular-cli 创建了一个项目，其中包含 AppComponent ，如下所示：

I have created a project using angular-cli which contains AppComponent as follows:

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 为

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

所以当我用 ng build 进行构建时它会生成类似 ./ dist / main.bundle.js 的文件，其内容如下：-

So when I build it with ng build it generates some files like this ./dist/main.bundle.js which contents some code as follows-

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

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

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

这意味着，在构建时，编译器/捆绑器正在读取html文件并将其连接到生成的js文件中。

That means, at the time of build the compiler/bundle-er is reading the html file and concatenating those into the generated js file.

但是在我的情况下，html也是动态的，并且是从服务器端驱动的。可以说，我的模板文件是 app.component.jsp ，而不是html，并且完全位于其他服务器或文件夹上。

But in my case the html is also dynamic and content-driven from server side. Lets say, instead of html, my template file is app.component.jsp and residing on some different server or folder altogether.

JSP文件有时返回< h1>早安，{{title}}< / h1>
，有时返回< h1>下午好，{{title}}< / h1> 取决于当前服务器时间。

Also that JSP file sometimes returns <h1>Good Morning, {{title}}</h1> and sometimes <h1>Good Afternoon, {{title}}</h1> depending on current server time.

如何实现此功能？

我了解的是，我需要定义某种加载器函数，例如： loadDynamicTemplate（template_url）

What I understand is that, I need to define some kind of loader function say : loadDynamicTemplate(template_url)

，并且需要在Component装饰器模板属性上使用该加载程序功能。在这种情况下，当生成main.bundle.JS时，它将也使用该函数。因此，在运行时angular将调用此函数并通过ajax加载HTML并使用它。

and need to use that loader-function on Component decorator template property. In that case, when the main.bundle.JS is generated, it will use that function also. So in runtime angular will call this function and load the HTML by ajax and use it.

更新1

这里，我发现SystemJS与之有些区别和Webpack。我还发现，如果可以使用SystemJS，则可以在运行时加载HTML文件。因此，我相信可以通过SystemJS配置解决此问题。但这又引起了另一个问题，尽管我认为这可能是一个单独的问题。因此，我在此处发布了一个新问题。

Here I found some difference between SystemJS and Webpack . I also found we can load the HTML files in run-time if we can use SystemJS. So I believe this problem can be solved with SystemJS configuration. But for that another problem comes into play, though I believe that could be a separate question. So I posted a new question to sort it out here.

如果该问题得到解决，我将尝试使用SystemJS，然后在有帮助的情况下在此处发布解决方案。

Probably if that question get solved I will try with SystemJS and then post solution here if it helps.

推荐答案

您可以在我的模板组件中使用[innerHtml]，例如以下内容（我没有测试）：

You could use [innerHtml] in a my-template component with something like this (I didn't test) :

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

这篇关于在angular2中动态加载HTML模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！