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

我收到错误：

  

类型的参数＆＃39; {path：string; component：string; } []＆＃39;不是   可分配给＆＃39;路线[]＆＃39;类型的参数。输入＆＃39; {path：string;   component：string; }＆＃39;不能分配类型＆＃39;路线＆＃39;。       财产类型＆＃39;组件＆＃39;是不相容的。         输入＆＃39; string＆＃39;不能分配类型＆＃39;输入＆＃39;。

Answer 1

路由的定义如下：

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

其中Type的定义如下：

export declare const Type: FunctionConstructor;

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

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

所以导入MembersComponent并按照这样说：

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

Answer 2

  

仅供参考

在组件类中进行更改后，我收到此错误

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

<强> SOLUTION：

REFERENCE LINK