javascript – Angular 2模板语法

2023年3月8日 182次阅读

在阅读与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模板？

最佳答案

How does following two statements differs?

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

因此,如果您要使用require,则必须使用模板而不是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/

点赞