Angular 5中的路由器模块不工作，如何使用它

Question

我正在尝试在Angular 5组件中使用Router进行重定向。

在app.module中，我有：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { HttpModule } from '@angular/http'
import { Router, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { ProductFormComponent } from './productform/productform.component';
import { ProductComponent } from './productform/product/product.component';
import { ProductService } from './productform/shared/product.service';
@NgModule({
declarations: [
AppComponent,
ProductFormComponent,
ProductComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ReactiveFormsModule,
RouterModule
],
exports: [
RouterModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

组件中：

import { Injectable } from '@angular/core';
import { Component, OnInit, AfterViewChecked, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms'
import { Router, RouterModule } from '@angular/router'@Component({
selector: 'app-product',
templateUrl: 'product.component.html'
})
export class ProductComponent implements OnInit, AfterViewChecked {
constructor(private router: Router) {
}
}

每当我试图在组件功能中使用this.router时，我都会在控制台中收到错误：

Unhandled Promise rejection: StaticInjectorError[Router]: 
StaticInjectorError[Router]: 
NullInjectorError: No provider for Router! ; Zone: <root> ; Task: Promise.then ; Value: Error: "StaticInjectorError[Router]: 
StaticInjectorError[Router]: 
NullInjectorError: No provider for Router!"

我不确定我是否应该添加一个提供程序以及什么提供程序？

我对棱角分明是个新手，不完全了解它是如何工作的。

感谢

Answer 1

您必须按如下方式添加路由信息。

const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent }, // These are dummy information
{ path: 'hero/',      component: HeroDetailComponent },
...
];
@NgModule({
imports: [
RouterModule.forRoot(
appRoutes,
)
// other imports here
],
...
})
export class AppModule { }

注意：如果您想重定向到另一个组件，只需调用window.location.replace('url'(

Answer 2

您必须使用RouterModule.forRoot([])。如果你还没有任何路线，那就空着走吧。在import中使用，如下所示：

imports: [
BrowserModule,
FormsModule,
HttpModule,
ReactiveFormsModule,
RouterModule.forRoot([])
]

从DOC 中查找更多详细信息

---

注意：

这是他们DOC中的示例代码。如果你有路线，你可以从中得到想法。

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { FormsModule }          from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent }          from './app.component';
import { CrisisListComponent }   from './crisis-list.component';
import { HeroListComponent }     from './hero-list.component';
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', component: HeroListComponent },
];
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
],
declarations: [
AppComponent,
HeroListComponent,
CrisisListComponent,
],
bootstrap: [ AppComponent ]
})
export class AppModule { }

Answer 3

您需要在应用程序的根目录中提供路由器。在您的导入数组中使用：

RouterModule.forRoot(routes)

您不需要导出RouterModule。当然你也需要一个路线阵列