Question

我使用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 */

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

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

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

如何实现此功能？

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

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

更新1

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

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

Answer 1

你可以在my-template组件中使用[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);
    }
}

Answer 2

要使用某些Good Morning, {{title}}插入模板，您可以使用Suguru Inatomi＆＃34; ng-dynamic＆＃34;成分

首先你必须安装它：

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来使用模板中的组件。我添加了一个自定义＆＃34;我的按钮＆＃34;与此处的文档示例中的成功相同：https://github.com/laco0416/ng-dynamic

Answer 3

现在看来，现在这样做的方法是在发出请求时设置responseType。 HttpClient-Requesting non-JSON data `

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

`

Answer 4

使用角度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);
  }
}

Answer 5

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

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

对构建时间/大小有何影响？

以angular2

5 个答案: