我已经使用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>
对其对构建时间/大小的影响的想法?