Angular 角度2路由-模块带NGV模块

我正在通过Angular 2进行一个平均项目，并且正在为我的各个页面设置路由。我见过很多使用ModuleWithProviders进行路由的示例，而不是使用NgModule（）的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);

NGO模块示例：

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 {}

---

NgModule和ModuleWithProviders是不同的东西

NgModule

是模块类的装饰器

这应该由

forRoot

方法返回

ModuleWithProviders

对象是具有

ngModule

属性的普通对象，该属性包含实际的模块类，并在

providers

属性中添加了其他提供程序

由于

ModuleWithProviders

是一个接口，它的使用是可选的。

关于两者之间的区别是绝对正确的（

@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 {}

RouterModule.forRoot(routes)

导入到

AppModule

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

尽管上述内容很有希望回答了您的问题，但我还想指出在

AppModule

中导入

RouterModule

与子模块之间的区别：

对于

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 {}

RouterModule.forRoot(routes)

对于子模块：

RouterModule.forChild(routes)

为什么?<代码>路由模块为您提供

• 组件（路由器出口）
• a指令（routerLink）
• 同时服务（激活路由以获取URL参数，路由器到 导航…）

第一次在应用程序模块中，

forRoot

将提供路由器组件并提供路由器服务。但下一次在子模块中，

forChild

将只提供路由器组件（不再提供服务，这些服务已通过应用程序模块导入提供）

---

想读更多吗？我觉得很了不起。

谢谢你提供的信息，但我认为这个问题还没有完全回答。这两种方法中有一种更优越吗？我相信答案是肯定的。它们是苹果和桔子。他们的比较是不正确的。这个模块是真的。ModuleWithProviders是一种类型，它的使用是可选的，并且只影响TS类型检查。好的，但在声明路由时，这两种方法都起作用。更喜欢哪一种？准确地说，“ModuleWithProviders与NgModule”的比较是不正确的。对于示例，其中一个模块使用另一个模块包装路由。另一个没有。如果包含路由中使用的

提供程序

和

声明

，则创建AppRoutingModule模块是有意义的。示例中没有显示这一点，因此AppRoutingModule在这里非常无用。当然，没有问题。