angular2：提供的参数不匹配任何调用目标的签名，即使我有所有需要的参数 [英] angular2: Supplied parameters do not match any signature of call target, even though i have all the needed params

查看：112
本文介绍了angular2：提供的参数不匹配任何调用目标的签名，即使我有所有需要的参数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

push.component.ts


$ b 

 从'@ angular / core'导入{Component，OnInit}; 
 
从'./dto/pushResult'导入{PushResult}; 
从'./dto/pushRequest'导入{PushRequest}; 
从'./push.service'中导入{PushService}; 
 $ b @Component（{
 // selector：'push-comp'，
 template：
 //`< form（submit）=submitForm（） > 
 //< input [（ngModel）] =element.name/> 
 // 
 //< button type =submit>提交< / button> 
 //< / form> 
 //< br> 
`< button（click）=getHeroes（）> get< / button> ;< button（click）=saveHeroes（）> push< / button>`，
 // templateUrl：'app / html / heroes.component.html'，
 providers： PushService] 
}）
导出类PushComponent实现OnInit {
 pushResult：PushResult; 
 // selectedHero：Hero; 
 // addingHero = false; 
错误：任何; 
元素：任何; 
 
构造函数（private pushService：PushService）{
 console.info（in PushComponent constructor（））; 
 
 
 
 getHeroes（）{
 this.pushService 
 .doSomeGet（）; 
 // .then（pushResult => this.pushResult = pushResult）
 // .catch（error => this.error = error）; 
 
 
 $ b 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）; 
 
 
 
 
 
 $ b ngOnInit（）{
 console.info（in PushComponent ngOnInit（））; 
 // this.getHeroes（）; 
 // this.saveHeroes（）; 
} 
 
}

push.service.ts p> 

 从'@ angular / core'导入{Injectable}; 
从'@ angular / http'导入{Http，Response，Headers}; 
 
导入'rxjs / add / operator / toPromise'; 
导入'rxjs / Rx'; 
从'./dto/pushResult'导入{PushResult}; 
从'./dto/pushRequest'导入{PushRequest}; 
从../shared/stringUtils.service中导入{StringUtilsService}; 
 
 
 @Injectable（）
导出类PushService {
 // private pushUrl ='http://www.ynet.com'; //网址API 
 // private getUrl ='/app/eladb.json'; // URL api 
 private getUrl ='/ SupporTool / ShowConfig？id = 4'; // URL api 
 private selectMessagesAttributesUrl ='/ SupporTool / Push / SelectMessagesAttributes'; // URL api 
 private postMultiMap ='/ SupporTool / Push / FeatureCreateNewMessage'; // URL api 
 private postBoolean ='/ SupporTool / Push / FeatureSelectPushMessages'; //网址api的URL 
 
 private stringUtilsService：StringUtilsService; 
 
构造函数（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（））
。 （
 data => {console.info（next：+ data）}，
 err => console.error（err）
）; 
 
 
 doSelectMessagesAttributesUrl2（pushRequest：PushRequest）{
 console.info（send post request）; 
 
让headers = new Headers（{
'Content-Type'：'application / x-www-form-urlencoded; charset = utf-8'}）; 
 
返回this.http 
 .post（this.selectMessagesAttributesUrl，，{headers：headers}）
 .map（res => res.json（））
 .subscribe（
 data => {console.info（next：）; console.info（data）}，
 err => console.error（err）
）; 
 
 
 $ b doFeatureCreateNewMessageUrl（pushRequest：PushRequest）{
 console.info（send post request）; 
 
让headers = new Headers（{
'Content-Type'：'application / x-www-form-urlencoded'}）; 
 
 var isLimit = true; 
 
返回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（send 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）; 
 
返回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）; 
} 
}

push.component.spec.ts 

 从'@ angular / platform-b​​rowser'导入{By}; 
从'@ angular / core'导入{DebugElement}; 
从'@ angular / core / testing'导入{addProviders，async，inject}; 
从'./push.component'中导入{PushComponent}; 
 $ b $ describe（'Component：Push'，（）=> {
 it（'should create a instance'，（）=> {
 let component = new PushComponent （）; 
 expect（component）.toBeTruthy（）; 
}）; 
}）;

app.routing.ts 

 从'@ angular / core'导入{ModuleWithProviders}; 
从'@ angular / router'导入{Routes，RouterModule}; 
 
从'./push/push.component'中导入{PushComponent}; 
 
 $ b $ const appRoutes：Routes = [
 {path：''，redirectTo：'/ push'，pathMatch：'full'}，
 {path：' push'，component：PushComponent} 
]; 
 
导出常量appRoutingProviders：any [] = []; 
 
导出const路由：ModuleWithProviders = RouterModule.forRoot（appRoutes）;

我读过 post ，但它曾经为我工作。所以我不明白我缺少的是什么。



我在 npm start

后得到这个错误

生成错误

  Broccoli插件：[BroccoliTypeScriptCompiler]失败：
错误：Typescript发现以下错误：
 /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）：提供的参数不匹配调用目标的任何签名。 
 at BroccoliTypeScriptCompiler._doIncrementalBuild（/Users/eladb/WorkspaceQa/SupporTool/src/main/webapp/html/ng2/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:120:19）
roccoliTypeScriptCompiler.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）
在lib $ rsvp $$ internal $$发布（/ Users / eladb / WorkspaceQa / SupporTool / src / main / webapp / html / ng2 / node_modules / angular-cli / node_modules / rs vp / dist / rsvp.js：1019：11）
在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）
在_combinedTickCallback（internal / process / next_tick.js：67：7）
在process._tickCallback（internal / process / next_tick.js ：98：9）


解决方案

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

 构造函数（private pushService：PushService）{

但是您不提供一个

  new PushComponent（/ *参数值丢失* /）;

如果您使用 new Xxx（）然后Angulars DI不参与，也不传递依赖关系。
只有当Angulars DI自己创建 PushComponent 时，它才解析并传递依赖关系。 

 从'@ angular / core / testing'导入{beforeEachProviders，it，describe，inject}; $（b 
 $ b）描述（'我的代码'，（）=> {
 beforeEachProviders（（）=> [PushService，PushComponent]）; 
 
 it （PushComponent），（pushComponent）=> {
 // actual test 
}）; 
}）;

不要期望得到一个注入的组件，你用这种方式得到的是一个组件类的实例（没有任何检测运行，也没有生命周期钩子被称为，...）

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


push.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();
    }

}

push.service.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);
    }
}

push.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();
  });
});

app.routing.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);

I read this post, but it used to work for me. So i cannt understand what i am missing.

and i get this error after npm start

Build error

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)

解决方案

PushComponent expects a PushService instance as parameter 

constructor(private pushService:PushService) {

but you don't provide one 

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

If you create an instance yourself with new Xxx() then Angulars DI is not involved and no dependencies are passed. Only when Angulars DI itself creates PushComponent does it resolve and pass dependencies. 

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

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

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

Don't expect to get a component injected. What you get this way is an instance of the components class (without any change detection running, nor lifecycle hooks being called, ...)

If you want a component, then you need to use TestBed. See also https://github.com/angular/angular/blob/master/CHANGELOG.md

这篇关于angular2：提供的参数不匹配任何调用目标的签名，即使我有所有需要的参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆