61

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

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

检测模块是通过 es6 语法导入的不是更简单吗？

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

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

4

2 回答 2

92

混淆来自 Angular 和 ES6 都使用相同的术语这一事实......

在 ES6/TypeScript 中：

  • 模块是项目中的任何代码文件。
  • 导入import是以关键字开头的行。
  • 导出export是以关键字开头的行。

在角：

  • 模块是一个用@NgModule. 它充当应用程序中所有组件、管道、指令和提供程序的注册表（又名容器）。
  • 导入是您放入装饰器imports属性的内容。@NgModule它使 Angular 模块能够使用在另一个 Angular 模块中定义的功能。
  • 您放置的导出是装饰器的exports属性。@NgModule它使 Angular 模块能够将它的一些组件/指令/管道暴露给应用程序中的其他模块。没有它，模块中定义的组件/指令/管道只能在该模块中使用。

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

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

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

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

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

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

于 2017-01-29T23:18:17.223 回答
19 
import { BrowserModule } from '@angular/platform-browser';

将文件加载到内存中。

@NgModule({
    imports:      [ BrowserModule ],

将向 Angular 注册 BrowserModule。

于 2017-01-29T23:23:20.370 回答