在Angular应用中,我看到@Component有moduleId属性。这是什么意思?
当模块。Id没有在任何地方定义,应用程序仍然工作。它怎么还能工作?
@Component({
moduleId: module.id,
selector: 'ng-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
directives: [AppComponent]
});
在Angular应用中,我看到@Component有moduleId属性。这是什么意思?
当模块。Id没有在任何地方定义,应用程序仍然工作。它怎么还能工作?
@Component({
moduleId: module.id,
selector: 'ng-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
directives: [AppComponent]
});
当前回答
看起来如果你在tsconfig中使用"module": "es6"。Json,你不必使用这个:)
其他回答
如果你得到typescript错误,只需在文件中声明变量。
// app.component.ts
declare var module: {
id: string;
}
//
@Component({
moduleId: module.id, // now it works without annoying Typescript
...
})
更新- 2016年12月8日
关键字module在node上可用。因此,如果你在你的项目中安装了@types/node,你将在typescript文件中自动获得module关键字,而不需要声明它。
install -D @types/node
根据您的配置,您可能必须在您的tsconfig中包含这个。Json文件获取工具:
//tsconfig.json
{
...
"compilerOptions": {
"types" : ["node"]
}
...
}
// some-component.ts
// now, no need to declare module
@Component({
moduleId: module.id, // now it works without annoying Typescript
...
})
祝你好运
更新于(2017-03-13):
moduleId被删除。“组件相对路径”烹饪书删除 我们在推荐的SystemJS配置中添加了一个新的SystemJS插件(SystemJS -angular-loader.js)。这个插件动态地将templateUrl和styleUrls中的“组件相对”路径转换为“绝对路径”。 我们强烈建议您只编写与组件相关的路径。这是这些文档中讨论的URL的唯一形式。您不再需要编写@Component({moduleId: module。Id}),你也不应该。
来源:https://angular.io/docs/ts/latest/guide/change-log.html
定义:
moduleId?: string
@Component注释中的moduleId参数接受一个字符串值,即;
“包含该组件的模块的模块id。”
CommonJS的用法:
SystemJS用法:__moduleName
使用moduleId的原因:
moduleId用于解析样式表和模板的相对路径,如文档中所述。
包含组件的模块的模块id。需要能够解决模板和样式的相对url。在Dart中,这可以自动确定,不需要设置。在CommonJS中,这个值总是可以设置为module.id。
裁判(旧):https://angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html
我们可以简单地通过设置@Component元数据的moduleId属性来指定模板和样式文件相对于组件类文件的位置
裁判:https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html 使用示例:
文件夹结构:
RootFolder
├── index.html
├── config.js
├── app
│ ├── components
│ │ ├── my.component.ts
│ │ ├── my.component.css
│ │ ├── my.component.html
没有module.id:
@Component({
selector: 'my-component',
templateUrl: 'app/components/my.component.html', <- Starts from base path
styleUrls: ['app/components/my.component.css'] <- Starts from base path
})
module.id:
tsconfig.json:
{
"compilerOptions": {
"module": "commonjs", <- need to change this if you want to use module.id property
...
@Component({
moduleId: module.id,
selector: 'my-component',
templateUrl: 'my.component.html', <- relative to the components current path
styleUrls: ['my.component.css'] <- relative to the components current path
})
添加moduleId: module。Id修复了在构建原生angular应用程序和angular web应用程序时可能出现的几个问题。使用它是最好的实践。
它还允许组件在当前目录中查找文件,而不是从顶部文件夹中查找
看起来如果你在tsconfig中使用"module": "es6"。Json,你不必使用这个:)
这个moduleId值被Angular的反射进程和metadata_resolver组件用来在组件被构造之前计算完全限定的组件路径。