Angular4：编译失败：参数类型 {path: string, component HomeComponent}[] 不可分配给参数类型 Routes

Question

我第一次尝试在 Angular 4:

上设置路由

我的app.module.ts代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { ProductComponent } from './product/product.component';
import { MembersComponent } from './members/members.component';

@NgModule({
  declarations: [
    AppComponent,
    ProductComponent,
    MembersComponent
  ],
  imports: [
    BrowserModule,
    NgModule,
    RouterModule.forRoot([
    {
        path: 'member',
        component: 'MembersComponent'
    },
    {
        path: 'product',
        component: 'ProductComponent'
    }
    ])

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我收到错误：

Argument of type '{ path: string; component: string; }[]' is not assignable to parameter of type 'Route[]'. Type '{ path: string; component: string; }' is not assignable to type 'Route'. Types of property 'component' are incompatible. Type 'string' is not assignable to type 'Type'.

Answer 1

路由定义如下：

export interface Route {
    path?: string;
    component?: Type<any>;

其中 Type 定义如下：

export declare const Type: FunctionConstructor;

所以你必须在路由定义中指定对组件class（这是一个函数构造函数）的引用，而不是字符串：

component: 'MembersComponent' <---------- should be component class reference

所以导入MembersComponent然后这样写：

import { MembersComponent } from '...' 
...
    RouterModule.forRoot([
    {
        path: 'member',
        component: MembersComponent
    },

Answer 2

JUST FOR REFERENCE

更改组件后 class 我得到了这个错误

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { ProductComponent } from './product/product.component';
import { MembersComponent } from './members/members.component';

@NgModule({
  declarations: [
    AppComponent,
    ProductComponent,
    MembersComponent
  ],
  imports: [
    BrowserModule,
    NgModule,
    RouterModule.forRoot([
    {
        path: 'member',
        component: MembersComponent
    },
    {
        path: 'product',
        component: ProductComponent
    }
    ])

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

解决方案：

Angular4：编译失败：参数类型 {path: string, component HomeComponent}[] 不可分配给参数类型 Routes

Angular4 : Failed to compile: Argument type {path: string, component HomeComponent}[] is not assignable to parameter type Routes

angular-routing

angular