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

问题描述

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

import { Component } from '@angular/core';@成分({选择器:'app-root'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent {title = '应用程序有效！';}

和 app.component.html 为

早安，{{title}}

因此，当我使用 ng build 构建它时，它会生成一些类似 ./dist/main.bundle.js 的文件，其中包含一些代码如下-

/* 586 *//***/函数(模块，导出){module.exports = "
\n 早上好，{{title}}\n
\n"/***/},/* 587 */

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

但在我的情况下，html 也是 动态 和从服务器端的内容驱动.比方说，我的模板文件不是 html，而是 app.component.jsp，并且完全位于不同的服务器或文件夹中.

还有那个 JSP 文件有时会返回 <h1>Good Morning, {{title}}</h1>有时

下午好，{{title}}

取决于当前服务器时间.

如何实现这个功能?

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

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

更新 1

在这里我发现了 SystemJS 和 Webpack 之间的一些区别.我还发现如果我们可以使用 SystemJS，我们可以在运行时加载 HTML 文件.所以我相信这个问题可以通过 SystemJS 的配置来解决.但为此，另一个问题开始发挥作用，尽管我认为这可能是一个单独的问题.所以我发布了一个新问题来解决它这里.

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

解决方案

你可以在 my-template 组件中使用 [innerHtml] 与这样的东西(我没有测试):

@Component({选择器:'我的模板'，模板:`<div [innerHtml]="myTemplate">

`})导出公共类 MyTemplate {私人我的模板:任何="；@Input() 网址:字符串；构造函数(http:Http){http.get("/path-to-your-jsp").map((html:any) => this.myTemplate = html);}}

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!';
}

And app.component.html as

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

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 */

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

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.

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

How to achieve this functionality?

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

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.

Update 1

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.

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

解决方案

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屋！