Question

我正在通过Angular 2开发一个MEAN项目，我正在设置各种页面的路由。我已经看到很多使用ModuleWithProviders进行路由的示例，而不是使用NgModule（https://angular.io/guide/router）的angular.io示例

哪种标准的做事方式？如果其中任何一个都可以接受，两者之间是否存在性能差异？

ModuleWithProviders示例：

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

import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ServicesComponent } from './services/services.component';

export const router: Routes = [
    { path: '', redirectTo: 'about', pathMatch: 'full'},
    { path: 'about', component: AboutComponent },
    { path: 'services', component: ServicesComponent }
];

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

NgModule示例：

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

import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ServicesComponent } from './services/services.component';

export const router: Routes = [
    { path: '', redirectTo: 'about', pathMatch: 'full'},
    { path: 'about', component: AboutComponent },
    { path: 'services', component: ServicesComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot( router )
  ],
  exports: [
    RouterModule
  ]
})

export class AppRoutingModule {}

Answer 1

NgModule和ModuleWithProviders是不同的东西。

NgModule是模块类的装饰器。

应该由forRoot方法返回的

ModuleWithProviders is the interface。 ModuleWithProviders对象是具有ngModule属性的普通对象，该属性包含使用providers属性中的其他提供程序扩充的实际模块类。

由于ModuleWithProviders是一个接口，因此它的用法是可选的。

Answer 2

estus关于两者之间的区别是绝对正确的（@NgModule是装饰者而ModuleWithProvider是一个界面）但实际上，问题的答案是哪种方法更好将是：

第二种方法更清晰，更常见，也是最佳做法，因为它定义了单独模块中的路线，稍后会将其导入AppModule：

export const routes: Routes = [
    { path: '', redirectTo: 'about', pathMatch: 'full'},
    { path: 'about', component: AboutComponent },
    { path: 'services', component: ServicesComponent }
];

const config: ExtraOptions = {
  useHash: true
};

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

导入AppModule

@NgModule({
  declarations: [AppComponent],
  imports: [AppRoutingModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

虽然上面提到的内容有希望回答您的问题，但我还想指出在RouterModule和子模块中导入AppModule之间的区别：

对于AppModule：

RouterModule.forRoot(routes)

对于子模块：

RouterModule.forChild(routes)

为什么呢？ RouterModule为您提供

组件（路由器插座）
指令（routerLink）
还服务（ActivatedRoute获取URL参数，路由器到导航...）

第一次在app模块中，forRoot将为路由器组件提供并提供路由器服务。但是下一次在子模块中，forChild将仅提供路由器组件（并且不再提供已通过应用程序模块导入提供的服务）。

想要阅读更多内容？我发现this article太棒了。

Angular 2 Routing - ModuleWithProviders v NgModule

2 个答案: