Question

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

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

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

template：require（'./ app.component.html'）
template：'。/ app.component.html'

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

Answer 1

以下两个陈述有何不同？

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

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

您可以通过各种方式加载模板

使用require你必须像这样分配给模板：
```
template: require('./app.component.html'),
```
使用这样的简单路径： -
```
templateUrl: 'app/app.component.html',
```
通过在@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/

Answer 2

您现在可以同步或异步加载模块。同步方式是CommonJS中定义的方式，非常简单 -

var mymod = require('myModule');
// Call the exported function "hello()"
mymod.hello();

这是同步方式，同步加载会阻止脚本执行，直到模块加载为止，因此最好异步加载模块：

require('myModule', function(mymod) {
    // Call the exported function hello
    mymod.hello(); 
});

你可以这样做 -

import {Component} from 'angular2/core';

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

在@Component装饰器中设置moduleId：module.id是这里的关键。如果你没有，那么Angular 2将在根级别寻找你的文件。所以你不再需要require（）了。希望它会有所帮助:)

Angular 2模板语法

2 个答案: