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构建它生成一些这样的文件./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>早安,{{title}}< / h1>
并且有时< h1> Good Afternoon,{{title}}< / h1>取决于当前的服务器时间。
如何实现这个功能?
我所了解的是,我需要定义一些加载器函数说:loadDynamicTemplate(template_url)
并且需要在Component decorator模板属性上使用该loader功能。在这种情况下,当生成main.bundle.JS时,它也会使用该函数。所以在运行时角度会调用这个函数,并通过ajax加载HTML并使用它。
更新1
Here我发现SystemJS和Webpack有一些区别。我也发现如果我们可以使用SystemJS,我们可以在运行时加载HTML文件。所以我相信这个问题可以通过SystemJS配置来解决。但是,另一个问题是发挥作用,虽然我认为这可能是一个单独的问题。所以我发布了一个新的问题来排除here。
可能如果这个问题得到解决,我会尝试使用SystemJS,然后在这里解决这个问题,如果它有帮助。
解决方法
@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); } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。