html - angular2 : Supplied parameters do not match any signature of call target, 即使我有所有需要的参数

Question

推送.component.ts

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

import {PushResult}        from './dto/pushResult';
import {PushRequest}       from './dto/pushRequest';
import {PushService}       from './push.service';

@Component({
    // selector: 'push-comp',
    template:
      //   `<form (submit)="submitForm()">
      //   <input [(ngModel)]="element.name"/>
      //
      //   <button type="submit">Submit the form</button>
      // </form>
      // <br>
    `<button (click)="getHeroes()"> get </button> <button (click)="saveHeroes()"> push </button>`,
    // templateUrl: 'app/html/heroes.component.html',
    providers: [PushService]
})
export class PushComponent implements OnInit {
    pushResult:PushResult;
    // selectedHero:Hero;
    // addingHero = false;
    error:any;
    element:any;

    constructor(private pushService:PushService) {
        console.info("in PushComponent constructor()");

    }

    getHeroes() {
        this.pushService
            .doSomeGet();
            // .then(pushResult => this.pushResult = pushResult)
            // .catch(error => this.error = error);
    }


    saveHeroes() {
        var pushRequest: PushRequest = new PushRequest();
        // this.pushService.doSelectMessagesAttributesUrl2(pushRequest);
        this.pushService.doFeatureCreateNewMessageUrl(pushRequest);
        this.pushService.doFeatureSelectPushMessages(this.element);
        // .then(pushResult => this.pushResult = pushResult)
        // .catch(error => this.error = error);
    }





    ngOnInit() {
        console.info("in PushComponent ngOnInit()");
       //  this.getHeroes();
       //   this.saveHeroes();
    }

}

推送服务.ts

import { Injectable }             from '@angular/core';
import {Http, Response, Headers}  from '@angular/http';

import 'rxjs/add/operator/toPromise';
import 'rxjs/Rx';
import { PushResult } from './dto/pushResult';
import {PushRequest} from './dto/pushRequest';
import {StringUtilsService} from "../shared/stringUtils.service";


@Injectable()
export class PushService {
    //private pushUrl = 'http://www.ynet.com';  // URL to web api
    //  private getUrl = '/app/eladb.json';  // URL to web api
    private getUrl = '/SupporTool/ShowConfig?id=4';  // URL to web api
    private selectMessagesAttributesUrl = '/SupporTool/Push/SelectMessagesAttributes';  // URL to web api
    private postMultiMap = '/SupporTool/Push/FeatureCreateNewMessage';  // URL to web api
    private postBoolean = '/SupporTool/Push/FeatureSelectPushMessages';  // URL to web api

    private stringUtilsService : StringUtilsService;

    constructor(private http: Http) {
        this.stringUtilsService = new StringUtilsService();
    }

    doSomeGet() {
        console.info("sending get request");


        let headers = new Headers({
            'Content-Type': 'application/xml'});


        this.http.get(this.getUrl, {headers: headers})
            .map(res => res.text())
            .subscribe(
                data => { console.info("next: "+data) },
                err => console.error(err)
            );
    }

    doSelectMessagesAttributesUrl2(pushRequest : PushRequest) {
        console.info("sending post request");

        let headers = new Headers({
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'});

        return this.http
            .post(this.selectMessagesAttributesUrl, "", {headers: headers})
            .map(res => res.json())
            .subscribe(
                data => { console.info("next: "); console.info(data) },
                err => console.error(err)
            );
    }


    doFeatureCreateNewMessageUrl(pushRequest : PushRequest) {
        console.info("sending post request");

        let headers = new Headers({
            'Content-Type': 'application/x-www-form-urlencoded'});

        var isLimit = true;

        return this.http
            .post(this.postBoolean, "#limit="+isLimit, {headers: headers})
            .map(res => res.json())
            .subscribe(
                data => { console.info("next: "); console.info(data) },
                err => console.error(err)
            );
    }

    doFeatureSelectPushMessages(element : any) {
        console.info("sending post request");

        let dict = {"limit":"true", "name":"foo"}


        let headers = new Headers({
            'Content-Type': 'application/x-www-form-urlencoded'});


        var params = {};
        params['push_input_internal_id'] = "1";
        params['b'] = "2";

        var formParamString = this.stringUtilsService.mapToFormParamsString(params);

        return this.http
            .post(this.postMultiMap, formParamString , {headers: headers})
            .map(res => res.json())
            .subscribe(
                data => { console.info("next: "); console.info(data) },
                err => console.error(err)
            );
    }

    private handleError(error: any) {
        console.error('An error occurred', error);
        // return Promise.reject(error.message || error);
    }
}

推送.component.spec.ts

import { By }           from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { addProviders, async, inject } from '@angular/core/testing';
import { PushComponent } from './push.component';

describe('Component: Push', () => {
  it('should create an instance', () => {
    let component = new PushComponent();
    expect(component).toBeTruthy();
  });
});

应用程序路由.ts

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

import { PushComponent }      from './push/push.component';


const appRoutes: Routes = [
  { path: '', redirectTo: '/push', pathMatch: 'full' },
  { path: 'push',  component: PushComponent}
];

export const appRoutingProviders: any[] = [];

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

我读了这个post ，但它曾经为我工作。所以我不明白我错过了什么。

在 npm start

之后我得到了这个错误

构建错误

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  /Users/eladb/WorkspaceQa/SupporTool/src/main/webapp/html/ng2/tmp/broccoli_type_script_compiler-input_base_path-2GTEvnc7.tmp/0/src/app/push/push.component.spec.ts (10, 21): Supplied parameters do not match any signature of call target.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/eladb/WorkspaceQa/SupporTool/src/main/webapp/html/ng2/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:120:19)
    at BroccoliTypeScriptCompiler.build (/Users/eladb/WorkspaceQa/SupporTool/src/main/webapp/html/ng2/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /Users/eladb/WorkspaceQa/SupporTool/src/main/webapp/html/ng2/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/Users/eladb/WorkspaceQa/SupporTool/src/main/webapp/html/ng2/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/eladb/WorkspaceQa/SupporTool/src/main/webapp/html/ng2/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/Users/eladb/WorkspaceQa/SupporTool/src/main/webapp/html/ng2/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/Users/eladb/WorkspaceQa/SupporTool/src/main/webapp/html/ng2/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Answer 1

PushComponent 需要一个 PushService 实例作为参数

constructor(private pushService:PushService) {

但是你没有提供

new PushComponent(/* parameter value missing */);

如果您使用 new Xxx() 自己创建实例，则不涉及 Angulars DI，也不会传递任何依赖项。只有当 Angulars DI 自己创建 PushComponent 时，它才会解析并传递依赖项。

import {beforeEachProviders, it, describe, inject} from '@angular/core/testing';

describe('my code', () => {
  beforeEachProviders(() => [PushService, PushComponent]);

  it('does stuff', inject([PushComponent], (pushComponent) => {
    // actual test
  });
});

不要指望注入(inject)组件。您通过这种方式获得的是组件类的一个实例(没有运行任何更改检测，也没有调用生命周期 Hook ，...)

如果你想要一个组件，那么你需要使用TestBed。另见 https://github.com/angular/angular/blob/master/CHANGELOG.md