导入/导出在 Angular 2+ ngModule 中的作用

Question

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

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

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

imports - other modules whose exported classes are needed by component templates declared in this module.

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

Answer 1

混淆来自于 Angular 和 ES6 使用相同的术语...

在ES6/TypeScript中：

一个模块是您项目中的任何代码文件。
import 是以 import 关键字开头的行。
export 是以 export 关键字开头的行。

在Angular中：

一个模块是一个用@NgModule装饰的class。它充当应用程序中所有组件、管道、指令和提供程序的注册表（也称为容器）。
一个 import 是你放在 @NgModule 装饰器的 imports 属性中的东西。它使 Angular 模块能够使用另一个 Angular 模块中定义的功能。
一个export你放的是@NgModule装饰器的exports属性。它使 Angular 模块能够将其某些 components/directives/pipes 公开给应用程序中的其他模块。没有它，模块中定义的 components/directives/pipes 只能在该模块中使用。

ES6 modules/imports/exports 非常low-level。它们是 ES6 语言的特性，就像 const 或 let 这样的关键字...在 ES6/TypeScript 中，每个文件都有其自己的范围.因此，每当您需要在文件中使用 class/function/variable 并且 class/function/variable 在另一个文件中定义时，您必须导入它（对应的是它必须在定义它的文件中导出）。这不是特定于 Angular。所有用 ES6 编写的项目都可以这样使用 modules/imports/exports。

另一方面，Angular 的 modules/imports/exports 是 框架 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 ]
})

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

Answer 2

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

会将文件加载到内存中。

@NgModule({
    imports:      [ BrowserModule ],

将向 Angular.

注册 BrowserModule

导入/导出在 Angular 2+ ngModule 中的作用

Role of imports / exports in Angular 2+ ngModule

angular-module

angular