Question

我正在创建一个angular 5应用程序，并希望将ActivatedRoute作为参数传递给构造函数。在此之前，应用程序正在运行，但现在我收到错误：

compiler.js：485 Uncaught Error：无法解析所有参数 DashboardComponent：（？）。在syntaxError（compiler.js：485） at CompileMetadataResolver._getDependenciesMetadata（compiler.js：15700）在CompileMetadataResolver._getTypeMetadata（compiler.js：15535） at CompileMetadataResolver.getNonNormalizedDirectiveMetadata（compiler.js：15020） at CompileMetadataResolver._getEntryComponentMetadata（compiler.js：15848）在eval（compiler.js：15829）在Array.forEach（） at CompileMetadataResolver._getEntryComponentsFromProvider（compiler.js：15828）在eval（compiler.js：15783）在Array.forEach（）

我的路由组件：

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

import { DashboardComponent } from './components/dashboard/dashboard.component';

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

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

export class AppRoutingModule { }

原因中的组件：

import { Component, OnInit } from '@angular/core';
import { RouterModule, ActivatedRoute, Routes } from '@angular/router';

import { Player } from "../../player";

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']  
})
export class DashboardComponent implements OnInit {  
  private _router;
  model = new Player("");  
  submitted = false;

  constructor(router: ActivatedRoute) { 
    this._router = router;
  }

  ngOnInit() {
  }

  onSubmit() { 
    this.submitted = true;
    this._router.navigate(['/game']);
  }

  get diagnostic() { return JSON.stringify(this.model); }
}

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';

import { AppComponent } from './app.component';
import { MatrixComponent } from './components/matrix/matrix.component';
import { SquareComponent } from './components/square/square.component';
import { PlayerComponent } from './components/player/player.component';
import { BoatContainerComponent } from './components/boat-container/boat-container.component';
import { AppRoutingModule } from './app-routing.module';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { GameComponent } from './components/game/game.component';


@NgModule({
  declarations: [
    AppComponent,
    MatrixComponent,
    SquareComponent,
    PlayerComponent,
    BoatContainerComponent,
    DashboardComponent,
    GameComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

出了什么问题？

Answer 1

将AppRoutingModule导入AppModule。

import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule, // <-- here
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor() {}
}

Answer 2

我最终解决了这个问题。如果在app.module.ts构造函数中传递ActivatedRoute（或其他类，如Router），则会发生相同的情况。我添加了Router和RouterModule的导入。这是代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { Router, RouterModule,ActivatedRoute } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { MatrixComponent } from './components/matrix/matrix.component';
import { SquareComponent } from './components/square/square.component';
import { PlayerComponent } from './components/player/player.component';
import { BoatContainerComponent } from './components/boat-container/boat-container.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { GameComponent } from './components/game/game.component';

@NgModule({
  declarations: [
    AppComponent,
    MatrixComponent,
    SquareComponent,
    PlayerComponent,
    BoatContainerComponent,
    DashboardComponent,
    GameComponent
  ],
  imports: [
    BrowserModule,    
    FormsModule,
    RouterModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(router: ActivatedRoute) {
    //console.log('Routes: ', JSON.stringify(router.config, undefined, 2));
 }
}

在组件构造函数中注入ActivatedRoute

2 个答案: