Question

当我向组件的构造函数添加服务时出现错误。错误是“无法解析RecordComponent的所有参数”。知道为什么将服务添加到构造函数会导致此错误吗？

这是我的服务

//record.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class RecordService {
    getPosts() {
       return 'Hello'; 
    }
}

这是组件。如果我在构造函数中注释掉service参数，它就可以工作。

//record.component.ts

import { Component, OnInit } from '@angular/core';
import { RecordService } from './record.service';
import { Router } from '@angular/router';

@Component({
    selector: 'record-view',
    template: '<h1>This is the record creation page</h1>'
})

export class RecordComponent implements OnInit {
    message: string;

    constructor(private recordService: RecordService, private router: Router) { 

    }

    ngOnInit() {
        this.message = this.recordService.getPosts(); 
        console.log(this.message);
    }
}

如果需要，我可以发布我的app.component，main和app.module。

编辑：

这是我的app.module文件

//app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { routing } from './app.routing';
import { AdminComponent } from './admin/admin.component';
import { RecordComponent } from './record/record.component';
import { RecordService } from './record/record.service';
import { AppComponent }  from './app.component';
import { HttpModule } from '@angular/http';

@NgModule({
  imports: [ BrowserModule, routing, HttpModule ],
  declarations: [ AppComponent, AdminComponent, RecordComponent ],
  providers: [RecordService],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

和我的app.component文件

//app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <h1>Angular 2 App</h1>
    <a routerLink="/admin">Admin</a>
    <a routerLink="/record">Record</a>

    <router-outlet></router-outlet>           `
})
export class AppComponent { }

和我的主文件

//main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(success => console.log(`Bootstrap success`))
  .catch(error => console.log(error));

app.routing文件

//app.routing.ts

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

import { AdminComponent } from './admin/admin.component';
import { RecordComponent } from './record/record.component';

const appRoutes: Routes = [
  {
    path: 'admin',
    component: AdminComponent
  },
  {
     path: 'record',
     component: RecordComponent
  }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

我看到的完整错误是

(index):19 Error: Error: Can't resolve all parameters for RecordComponent: (?, ?).
        at CompileMetadataResolver.getDependenciesMetadata (http://localhost:3000/vendor/@angular/compiler/bundles/compiler.umd.js:14381:21)
        at CompileMetadataResolver.getTypeMetadata (http://localhost:3000/vendor/@angular/compiler/bundles/compiler.umd.js:14282:28)
        at CompileMetadataResolver.getDirectiveMetadata (http://localhost:3000/vendor/@angular/compiler/bundles/compiler.umd.js:14057:30)
        at eval (http://localhost:3000/vendor/@angular/compiler/bundles/compiler.umd.js:14461:35)
        at Array.forEach (native)
        at CompileMetadataResolver._getEntryComponentsFromProvider (http://localhost:3000/vendor/@angular/compiler/bundles/compiler.umd.js:14460:32)
        at eval (http://localhost:3000/vendor/@angular/compiler/bundles/compiler.umd.js:14418:85)
        at Array.forEach (native)
        at CompileMetadataResolver.getProvidersMetadata (http://localhost:3000/vendor/@angular/compiler/bundles/compiler.umd.js:14405:21)
        at eval (http://localhost:3000/vendor/@angular/compiler/bundles/compiler.umd.js:14412:43)
    Evaluating http://localhost:3000/public/app/main.js
    Error loading http://localhost:3000/public/app/main.js

Answer 1

1）在AppModule的提供者中添加RecordService，如下所示 -

providers: [RecordService],

2）在AppModule的imports属性中导入RouterModule，如下所示 -

imports:      [ BrowserModule, routing, HttpModule, RouterModule ],

3）尝试更改RecordComponent的构造函数，如下所示 -

constructor( @Inject(RecordService) private recordService: RecordService, private router: Router) {

看看这是否有帮助。

角度2分量

1 个答案: