Angular2 - 导入 Angular 模块

Question

模块在 app.module.ts 中导入，通过在下面添加一个条目，

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    DirectoryComponent,
    FilterPipe,
    LoggingService
  ],
  imports: [
    FormsModule,
    BrowserModule,
    HttpClientModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})

但是在../src/app/app.routes.ts中直接使用了RouterModule，如下图，

import {Routes, RouterModule} from "@angular/router";
export const routes:Routes = [
    /* Each route will be an object {}*/
    {path: 'directory', component: DirectoryComponent},
    {path: '',          component: HomeComponent}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

在@NgModule(imports: [..])中没有RouterModule的条目。

---

1)是否有不同的方法来导入 Angular 模块？

2)导入 angular 模块与导入 typescript 模块是否不同？

Answer 1

在您的 routes.ts 中，您正在创建名为 routes 的常量，将其分配给 RouterModule 并将其导出。

在您的应用中，您正在导入 routes 常量，它只是对模块的引用，就像其他任何内容一样:

@NgModule(
 .... imports: [
         routing, // here you are using the const
      ],
....
)

你在这一行分配它:

 export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

您可以改为使用导出的 routes 并在您的 app.module 中使用它:

@NgModule(
 .... imports: [
         RouterModule.forRoot(routes),
      ],
....

第一个是在使用它之前将它分配给一个变量(以及 const)。

Typescript modules不同于 Angular 模块。 typescript 模块允许您在 typescript 文件之间共享 typescript 对象。您可以在任何地方使用它们，即使是在非 Angular typescript 中也是如此。它们是 import { something } from 'myfile.ts' 并且它被转译为 JavaScript ES5 require 语句，就像 ES6 导入一样。根据我的经验，很少有人将这些称为模块。

Angular modules是 Angular 组件、服务、指令和管道等的模块化 block ，它们被捆绑在一起，以便编译器知道如何处理它们，并且您可以轻松地从它们组合 Angular 应用程序。如果有人在谈论 angular 和模块，他们很可能在谈论这些，因为 typescript 模块是如此基础 - 每个 typescript 文件都会在顶部有多个导入。