javascript - Angular 2\TypeScript 中 export 关键字的确切含义是什么？

Question

我是 Angular 2 的新手。我正在研究如何将模块创建到 Angular 应用程序中，我对我正在学习的教程有以下疑问。

我的疑问与路由有关。

所以在我的示例中定义了这个 AuthModule 模块:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { SigninComponent } from './signin/signin.component';
import { SignupComponent } from './signup/signup.component';
import { AuthRoutingModule } from './auth-routing.module';

@NgModule({
  // Components and directives used by the module:
  declarations: [
    SigninComponent,
    SignupComponent
  ],
  // Import modules used by this features module:
  imports: [
    FormsModule,
    AuthRoutingModule
  ]
})
export class AuthModule {}

并且我定义了相关的rotues配置类:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ShoppingListComponent } from './shopping-list/shopping-list.component';

const appRoutes: Routes = [
  { path: '', redirectTo: '/recipes', pathMatch: 'full' },
  { path: 'shopping-list', component: ShoppingListComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {

}

所以我认为 export 关键字意味着可以将与此类相关的内容导出并在其他地方使用(在这种情况下，我想到了 imports 数组AuthModule 类)。

是吗？或者我错过了什么？ export 语句的确切含义是什么？

我不明白它是与 Angular 相关还是更普遍地与 TypeScript 相关(因为我在这里找到了 https://www.typescriptlang.org/docs/handbook/modules.html )。所以在我看来，这个模块概念并没有直接绑定(bind)到 Angular 2 框架，而是一个 TypeScript 概念，以一种智能的方式分割我们的代码(然后 Angular 2 可以使用语言的这种特性)。

是我遗漏了什么吗？

Answer 1

Angular 导入/导出和 TypeScript 导入/导出是两个不同的概念。

TypeScript 导入/导出 在语言级别工作以明确一个使用过的标识符完全引用。这与 Angular 完全无关。

因此，如果您使用 FormsModule，则不会有任何歧义，FormsModule 是什么意思。如果您的代码或您的任何依赖项中有多个 FormsModule，那么您需要通过 import 明确表示是哪个。您不能在不消除歧义的情况下从不同位置导入 2 个 FormsModule(例如，在导入中使用 as foo，然后使用 foo.FormsModule 引用它).

这样您就可以使用来自任意第 3 方库的代码并避免名称冲突。

Angular 导入/导出用于使一个模块的内容可用于另一个模块。

你的:

imports: [
    FormsModule,
    AuthRoutingModule
  ]

允许您在 AuthModule 中使用来自 FormsModule 和 AuthRoutingModule 的指令，并在 AppModule 中注册这些模块提供的服务 作用域或封闭的惰性加载根作用域。

如果您在 TypeScript 代码中引用任何 Angulars 指令或服务，您还需要添加 TypeScript 导入。上面的 FormsModule 和 AuthRoutingModule 需要使用 TypeScript 导入来导入，以使 Angular imports: [...] 工作。

比如喜欢

<form #f="ngForm">
  <input type="text">
</form>

仅当 FormsModule 列在当前模块的 imports: [ ... ] 中时才有效。

不需要 TypeScript 导入，因为没有 TypeScript 代码。