Angular 2\TypeScript 中 export 关键字的确切含义是啥？

Posted 2023-02-22

【中文标题】Angular 2\\TypeScript 中 export 关键字的确切含义是啥？

【英文标题】：What is the exact meaning of export keyword in Angular 2\TypeScript?Angular 2\TypeScript 中 export 关键字的确切含义是什么？

【发布时间】：2018-04-03 04:49:53

【问题描述】：

我是 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）。所以在我看来，这个模块概念并没有直接绑定到 Angular 2 框架，而是一个 TypeScript 概念，以一种智能的方式细分我们的代码（然后 Angular 2 可以使用该语言的这种特性）。

是不是我错过了什么？

【问题讨论】：

阅读文章Avoiding common confusions with modules in Angular

【参考方案1】：

是的，在你的 typescript 类之前使用 export 关键字是对的，你可以在其他地方使用该类 .. 在你的项目中

【参考方案2】：

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

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

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

通过这种方式，您可以使用来自任意 3rd 方库的代码并避免名称冲突。

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 代码。