首页 文章

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

提问于
浏览 次
30

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

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

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

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

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

angular angular-module

2 回答

  • 46

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

    In ES6/TypeScript:

    • 模块是项目中的任何代码文件 .

    • 导入是以 import 关键字开头的行 .

    • 导出是以 export 关键字开头的行 .

    In Angular:

    • 模块是用 @NgModule 装饰的类 . 它充当应用程序中所有组件，管道，指令和提供程序的注册表（也称为容器） .

    • 导入是您放在 @NgModule 装饰器的 imports 属性中的内容 . 它使Angular模块能够使用在另一个Angular模块中定义的功能 .

    • 你输出的是 @NgModule 装饰器的 exports 属性 . 它使Angular模块能够将其某些组件/指令/管道暴露给应用程序中的其他模块 . 没有它，模块中定义的组件/指令/管道只能在该模块中使用 .

    ES6模块/进口/出口是 very low-level . 它们是 feature of the ES6 language ，就像 const 或 let 等关键字一样......在ES6 / TypeScript中，每个文件都有ITS OWN SCOPE . 因此，每当您需要在文件中使用类/函数/变量并且在另一个文件中定义类/函数/变量时，您必须导入它（对应的是它必须在定义它的文件中导出） . 这不是Angular特有的 . ES6中编写的所有项目都可以这种方式使用模块/导入/导出 .

    另一方面，Angular的模块/进口/出口是 feature of the Angular framework . 它们只在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 ]
})

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

    回复于
  • 13
    import { BrowserModule } from '@angular/platform-browser';

    将文件加载到内存中 .

    @NgModule({
    imports:      [ BrowserModule ],

    将使用Angular注册BrowserModule .

    回复于

相关问题