[英]Role of imports / exports in Angular 2+ ngModule
I'm learning Angular 2+ and I'm having a hard time understanding the role of imports/exports in an ngModule. 我正在学习Angular 2+,我很难理解导入/导出在ngModule中的作用。 More specifically why is important to import a module if you're going to import it anyway using es6 syntax as well
更具体地说,如果您要使用es6语法导入模块,为什么导入模块很重要
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ]
})
Wasn't much simpler to detect that the module was imported via es6 syntax? 通过es6语法检测模块是不是更简单?
imports - other modules whose exported classes are needed by component templates declared in this module.
导入 - 此模块中声明的组件模板需要导出类的其他模块。
But we're already importing those on the component level. 但是我们已经在组件级别上导入了那些。 Am I missing something?
我错过了什么吗? I'm also looking for some example to why they went for this syntax .
我也在寻找他们为什么选择这种语法的一些例子。
The confusion comes from the fact both Angular and ES6 are using the same terminology... 令人困惑的是,Angular和ES6都在使用相同的术语......
In ES6/TypeScript: 在ES6 / TypeScript中:
import
keyword. import
关键字开头的行。 export
keyword. export
关键字开头的行。 In Angular: 在Angular中:
@NgModule
. @NgModule
修饰的类。 It serves as a registry (aka container) for all the components, pipes, directives and providers in your application. imports
property of the @NgModule
decorator. @NgModule
装饰器的imports
属性中的@NgModule
。 It enables an Angular module to use functionality that was defined in another Angular module. exports
property of the @NgModule
decorator. exports
的财产@NgModule
装饰。 It enables an Angular module to expose some of its components/directives/pipes to the other modules in the applications. ES6 modules/imports/exports are very low-level . ES6模块/进口/出口非常低 。 They are a feature of the ES6 language , just like keywords like
const
or let
... In ES6/TypeScript, each file has ITS OWN SCOPE. 它们是ES6语言的一个特性,就像
const
或let
这样的关键字......在ES6 / TypeScript中,每个文件都有ITS自己的范围。 So whenever you need to use a class/function/variable in a file and that class/function/variable was defined in another file, you must import it (the counterpart being that it must be exported in the file where it was defined). 因此,每当您需要在文件中使用类/函数/变量并且该类/函数/变量在另一个文件中定义时,您必须导入它(对应的是必须将其导出到定义它的文件中)。 This is not specific to Angular.
这不是Angular特有的。 ALL PROJECTS WRITTEN IN ES6 can use modules/imports/exports in this manner.
ES6中编写的所有项目都可以这种方式使用模块/导入/导出。
On the other hand, Angular's modules/imports/exports are a feature of the Angular framework . 另一方面,Angular的模块/导入/导出是Angular框架的一个特性 。 They only make sense in Angular world.
它们只在Angular世界中有意义。 Other JavaScript frameworks might have similar notions but they'll use a different syntax.
其他JavaScript框架可能有类似的概念,但它们将使用不同的语法。
Now there's some overlap between the two. 现在两者之间有一些重叠。 For instance, in order to use a symbol in
@NgModule.imports
(Angular world), you need to import
the symbol in the TypeScript file where the module is defined (ES6/TypeScript world): 例如,为了在
@NgModule.imports
(Angular world)中使用符号,您需要在定义模块的TypeScript文件中import
符号(ES6 / TypeScript世界):
// ES6/TypeScript Imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
@NgModule({
// Angular Imports
imports: [ BrowserModule ]
})
But if you read the above definitions carefully, you'll realize that the two things are actually quite different. 但是如果你仔细阅读上面的定义,你会发现这两件事实际上是完全不同的。 One is the language, the other is the framework.
一个是语言,另一个是框架。
import { BrowserModule } from '@angular/platform-browser';
will load the file into memory. 将文件加载到内存中。
@NgModule({
imports: [ BrowserModule ],
will register BrowserModule with Angular. 将使用Angular注册BrowserModule。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.