进出口在Angular 2+ ngModule中的作用 [英] Role of imports / exports in Angular 2+ ngModule

问题描述

我正在学习Angular 2+，并且很难理解ngModule中导入/导出的作用.更具体地说，如果仍然要使用es6语法导入模块，为什么导入模块很重要

I'm learning Angular 2+ and I'm having a hard time understanding the role of imports/exports in an ngModule. More specifically why is important to import a module if you're going to import it anyway using es6 syntax as well

import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ]
})

检测模块是否是通过es6语法导入的简单得多吗?

Wasn't much simpler to detect that the module was imported via es6 syntax?

imports-组件需要其导出的类的其他模块 该模块中声明的模板.

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 .

推荐答案

混乱之处来自Angular和ES6使用相同术语的事实.

The confusion comes from the fact both Angular and ES6 are using the same terminology...

在ES6/TypeScript中:

• 模块是项目中的任何代码文件.
• import 是从import关键字开始的一行.
• export 是以export关键字开头的行.

• A module is any code file in your project.
• An import is a line starting with the import keyword.
• An export is a line starting with the export keyword.

在Angular中:

• 模块是一个用@NgModule装饰的类.它充当应用程序中所有组件，管道，指令和提供程序的注册表(又名容器).
• import 是您放置在@NgModule装饰器的imports属性中的内容.它使Angular模块可以使用在另一个Angular模块中定义的功能.
• export 放置的是@NgModule装饰器的exports属性.它使Angular模块能够将其某些组件/指令/管道公开给应用程序中的其他模块.没有它，模块中定义的组件/指令/管道只能在该模块中使用.

• A module is a class decorated with @NgModule. It serves as a registry (aka container) for all the components, pipes, directives and providers in your application.
• An import is what you put in the imports property of the @NgModule decorator. It enables an Angular module to use functionality that was defined in another Angular module.
• An export what you put is the exports property of the @NgModule decorator. It enables an Angular module to expose some of its components/directives/pipes to the other modules in the applications. Without it, the components/directives/pipes defined in a module could only be used in that module.

ES6模块/导入/导出非常底层.它们是ES6语言的功能，就像const或let这样的关键字.在ES6/TypeScript中，每个文件都有其自己的范围.因此，每当需要在文件中使用类/函数/变量并且在另一个文件中定义了类/函数/变量时，都必须将其导入(对应的是必须将其导出到定义该文件的文件中).这不是特定于Angular的. ES6中编写的所有项目都可以这种方式使用模块/导入/导出.

ES6 modules/imports/exports are very low-level. They are a feature of the ES6 language, just like keywords like const or let... In ES6/TypeScript, each file has ITS OWN SCOPE. 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. ALL PROJECTS WRITTEN IN ES6 can use modules/imports/exports in this manner.

另一方面，Angular的模块/导入/导出是Angular框架的功能.它们仅在Angular世界中有意义.其他JavaScript框架可能有类似的概念，但它们将使用不同的语法.

On the other hand, Angular's modules/imports/exports are a feature of the Angular framework. They only make sense in Angular world. Other JavaScript frameworks might have similar notions but they'll use a different syntax.

现在两者之间有些重叠.例如，为了在@NgModule.imports(角度世界)中使用符号，您需要在定义模块的TypeScript文件(ES6/TypeScript世界)中import该符号:

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):

// 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.

这篇关于进出口在Angular 2+ ngModule中的作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！