角2模板语法

Question

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

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

以下两条语句有何不同？要求函数在这里扮演什么角色？

• 模板:需要量(‘./app.Component.html’)
• 模板：'./app.component.html‘

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

Answer 1

以下两条语句有何不同？

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

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

有多种方法可以加载模板。

1. 使用require时，您必须为模板分配如下所示： 模板: require('./app.component.html')，
2. 使用这样简单的路径:- templateUrl：'app/app.component.html‘
3. 通过在@component注释中设置module.id属性，通过这样做，角将查看当前文件夹中查看根的模板内部设置。就像这样： @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是这里的关键。如果您没有这个，那么角2将在根level.So查找您的文件，您不再需要()。希望能有所帮助:)