Question

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

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

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

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

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

Answer 1

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

在ES6 / TypeScript中：

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

在Angular中：

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

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

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

现在两者之间存在一些重叠。例如，为了在@NgModule.imports（角度世界）中使用符号，您需要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

2 个答案: