进口/出口在Angular 2+ ngModule中的作用

Question

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

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

通过es6语法检测模块是不是更简单？

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

但是我们已经在组件级别上导入了那些.我错过了什么吗？我也在寻找他们为什么选择这种语法的一些例子.

Answer 1

令人困惑的是,Angular和ES6都在使用相同的术语......

在ES6/TypeScript中:

• 一个模块是项目中的任何代码文件.
• 一个进口是先从一条线import的关键字.
• 一个出口是先从一条线export的关键字.

在Angular中:

• 一个模块是装饰着一类@NgModule.它充当应用程序中所有组件,管道,指令和提供程序的注册表(也称为容器).
• 一个进口是你放什么imports的财产@NgModule装饰.它使Angular模块能够使用在另一个Angular模块中定义的功能.
• 您放置的导出是装饰器的exports属性@NgModule.它使Angular模块能够将其某些组件/指令/管道暴露给应用程序中的其他模块.没有它,模块中定义的组件/指令/管道只能在该模块中使用.

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

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

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

// ES6/TypeScript Imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

@NgModule({
  // Angular Imports
  imports: [ BrowserModule ]
})

但如果你仔细阅读上面的定义,你会发现这两件事实际上是完全不同的.一个是语言,另一个是框架.

Answer 2

import { BrowserModule } from '@angular/platform-browser'; 

将文件加载到内存中.

@NgModule({
    imports:      [ BrowserModule ],

将使用Angular注册BrowserModule.