在Angular2中动态加载HTML模板



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

这意味着,在构建时,编译器/捆绑包正在读取HTML文件并将其串联到生成的JS文件中。

但是,在我的情况下,HTML也是 Dynamic 和从服务器端驱动的。可以说,我的模板文件是 app.component.jsp 而不是HTML,并且完全居住在某些不同的服务器或文件夹上。

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,然后在此处发布解决方案。

您可以在具有这样的内容(我没有测试)的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);
    }
}

要用某些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...
  }
}

您可以通过定义共享模块来使用模板中的组件。我添加了一个自定义的" my-button",并在此处的文档示例中进行了成功:https://github.com/laco0416/ng-dynamic

与Angular 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);
  }
}

现在看来,当您提出请求时,要设置响应类型。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;
        }
      );
  }
}

`

为什么不将一个文件中的所有模板放在条件下显示。像您的./app.component.html看起来一样:

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

对其对构建时间/大小的影响的想法?

相关内容

  • 没有找到相关文章

最新更新