47

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

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的文件，其中的一些代码内容如下 -

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

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

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

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

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

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

如何实现这个功能？

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

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

更新 1

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

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

4

5 回答 5

38

你可以在一个类似这样的组件中使用 [innerHtml] 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);
    }
}
于 2016-12-07T16:35:58.800 回答
18

要使用 some 插入模板Good Morning, {{title}}，您可以使用 Suguru Inatomi 的“ng-dynamic”组件。

首先你必须安装它：

npm install --save ng-dynamic

然后导入你的 NgModule ：

@NgModule({
  imports: [
    ...
    DynamicComponentModule.forRoot({}),
    ...
  ],
  ...
})
export class AppModule {}

最后像这样使用它：

@Component({
  selector: 'app-root',
  template: '<div *dynamicComponent="template; context: bindings;"></div>'
})
export class AppComponent {
  bindings: any = {title: "Chuck Norris"};
  template: string = `
    <h1>Good Morning, {{title}}</h1>
  `;
  constructor(http: Http) {
    http.get("/path-to-your-jsp").map((html:string) => this.template = html); //<- You may set bindings in request headers...
  }
}

您可以通过定义 SharedModule 在模板中使用组件。我添加了一个自定义的“我的按钮”，并在此处的文档示例中获得了成功：https ://github.com/laco0416/ng-dynamic

于 2016-12-09T14:25:41.907 回答
3

使用角度 6

import { Component, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
            <div [innerHtml]="myTemplate">
            </div>
          `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private myTemplate: any = '';
  constructor(http: HttpClient) {
    http.get('/service-path', {responseType: 'text'}).subscribe(data => this.myTemplate = data);
  }
}
于 2018-06-09T22:27:19.027 回答
2

现在看来，这样做的方法是在您提出请求时设置 responseType 。HttpClient-请求非 JSON 数据 `

@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", { responseType: 'text' })
      .subscribe(
        (data: string) => {
          this.myTemplate = html;
        }
      );
  }
}

`

于 2017-08-15T01:24:11.613 回答
0

为什么不将所有模板放在一个文件中并根据条件显示它们。就像你的 ./app.component.html 看起来像：

<div *ngIf="isWorld" >
  <h1>  Hello World </h1>
</div>
<div *ngIf="isUniverse" >
  <h1>  Hello Universe </h1>
</div>

关于它对构建时间/大小的影响有什么想法吗？

于 2018-06-27T18:35:00.220 回答