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

发布时间：2020-12-17 08:04:55 所属栏目：安全来源：网络整理

导读：我正在学习Angular 2，我很难理解ngModule中导入/导出的作用。更具体地说，为什么导入模块很重要，如果你要使用es6语法导入它也是如此 import { BrowserModule } from '@angular/platform-browser';@NgModule({ imports: [ BrowserModule ],providers: [ Log

我正在学习Angular 2，我很难理解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.

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

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

在ES6 / TypeScript中：

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

在Angular中：

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

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

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

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

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!