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 模块的导入与打字稿模块的导入不同吗？

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 模块。打字稿模块允许您在打字稿文件之间共享打字稿对象。您可以在任何地方使用它们，即使在非 angular 打字稿中也是如此。它们是 import { something } from 'myfile.ts' 并且它被转译为 JavaScript ES5 require 语句，就像 ES6 导入一样。根据我的经验，很少有人将这些称为模块。

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

Answer 2

有一个条目，您刚刚将其命名为 routing 作为 const。所以在你的情况下 routing 实际上是 RouterModule.forRoot(routes); 这意味着它是 RouterModule.

我认为 angular 团队在这里解释得很好 https://angular.io/guide/router

并且没有打字稿模块。只有 angular 模块。在您的情况下，您将 angular 模块分配给了一个 const 并以名称 routing 引用并导出了它。

Angular2 - 导入 angular 个模块

Angular2 - Importing angular modules

typescript

angular-module

angular