javascript - Angular 2 模板语法

Question

在阅读与 Angular2 相关的在线博客时，我遇到了以下语法。

@Component({
    selector: 'app',
    template: require('./app.component.html'),
    styles: [require('./app.component.css')],
    directives: [ ROUTER_DIRECTIVES ],        
 })

以下两个陈述有何不同？ require函数在这里的作用是什么？

• 模板:require('./app.component.html')
• 模板:'./app.component.html'

上面语句中的 require 是否异步加载 html 模板？

Answer 1

How does following two statements differs?

require 是 CommonJS 的一部分，require('./app.component.html') 的结果将是模板字符串，但是 templateUrl 字段需要 .html 模板的路径。

因此，如果您要使用 require，则必须使用 template 而不是 templateUrl。

有多种方法可以加载模板

1. 使用 require 你必须像这样分配给模板:

   template: require('./app.component.html'),
   

2. 使用像这样的简单路径:- <​​/p>

   templateUrl: 'app/app.component.html',
   

3. 通过在@component 注释中设置 module.id 属性，angular 将查看当前文件夹对于查看根的模板插图。像这样:

   @Component({
       selector: 'my-app',
       moduleId: module.id,
       templateUrl: 'app.component.html',
       styleUrls: ['app.component.css']
   })
   

更多信息请看这里http://schwarty.com/2015/12/22/angular2-relative-paths-for-templateurl-and-styleurls/