Angular 2“提供的参数与调用目标的任何签名都不匹配”错误

Question

我在 Ionic 2/Angular 2 应用程序上添加了翻译代码。现在，当我使用 ionic build android 构建时，我收到了 Supplied parameters... 错误，但并不清楚是哪个文件/行导致了错误。

translate/translation.ts

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

// import translations
import { LANG_AFR_TRANS } from './lang-afr';
import { LANG_EN_TRANS } from './lang-en';

// translation token
export const TRANSLATIONS = new OpaqueToken('translations');

// all translations
const dictionary = {
    afr: LANG_AFR_TRANS,
    en: LANG_EN_TRANS
};

// providers
export const TRANSLATION_PROVIDERS = [
    { 
        provide: TRANSLATIONS, 
        useValue: dictionary
    }
];

翻译/lang-afr.ts

export const LANG_AFR_TRANS = {
    'hello world': 'Goie More',
    'Co-op Login': 'Kooperasie Inteken',
    'Username': 'Gebruikersnaam',
    'Password': 'Wagwoord',
    'Login': 'Teken in',
    'Sign in as a different user': "Teken in met 'n ander gebruikersnaam'?",
    'Forgot Password?': 'Ek het my wagwoord vergeet',
    'Username cannot be blank or contain numbers': 'Vul asb u gebruikersnaam in',
    'Incorrect username or password': 'Of gebruikersnaam of wagwoord is verkeerd',
    'Field cannot be blank please enter password': 'Vul asb u wagwoord in'
}

services/translate.ts

import { Injectable, Inject } from '@angular/core';
import { TRANSLATIONS } from '../translate/translation';

@Injectable()
export class TranslateService {
    private _currentLang: string;

    public get currentLang() {
        return this._currentLang;
    }

    // inject our translations
    constructor(@Inject(TRANSLATIONS) private _translations: any) {

    }

    public use(lang: string): void {
        // set current language
        this._currentLang = lang;
    }

    private translate(key: string): string {
        // private perform translation
        let translation = key;

        if (this._translations[this.currentLang] && this._translations[this.currentLang][key]) {
            return this._translations[this.currentLang][key];
        }

        return translation;
    }

    public instant(key: string) {
        return this.translate(key)
    }
}

管道/translate.filter

import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '../services/translate';

@Pipe({
    name: 'translate',
    pure: false
})

export class TranslatePipe implements PipeTransform {
    constructor(private _translate: TranslateService) { }

    transform(value: string, args: any[]): any {
        if (!value) return;
        return this._translate.instant(value);
    }
}

pages/login/login.html

登录页面有按钮，用户可以在其中选择语言首选项，并在需要时使用translate 过滤器。

...

<ion-item>
<ion-label floating>{{ 'Password' | translate }}</ion-label>
<ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<div [hidden]="loginForm.controls.password.valid || (loginForm.controls.password.pristine && !loginForm.controls.password.touched)" class="validation-message">
{{ 'Field cannot be blank please enter password' | translate }}
</div>

<ion-item *ngIf="selectedLanguage">
    This application is currently in {{ selectedLanguage }}
</ion-item>

<button *ngFor="let lang of supportedLanguages" ion-button (click)="selectLang(lang)" class="btn btn-default" [disabled]="isCurrentLang(lang.value)">
{{ lang.display }}
</button>

...

pages/login/login.ts

export class LoginPage {
  ...

  public translatedText: string;
  public supportedLanguages: any;
  selectedLanguage: string;

  ...

  constructor( ... , private _translate: TranslateService) {
      ...

    // langauge buttons
    this.supportedLanguages = [
      {
        display: 'English',
        value: 'en'
      },
      {
        display: 'Afrikaans',
        value: 'afr'
      }
    ];

    let langPrefrence = localStorage.getItem("langPrefrence");

    if (langPrefrence) {
      this.selectLang(JSON.parse(langPrefrence));
     } else {
       this.selectLang({display: 'English', value: 'en'});
     };

     ... 
  }
  isCurrentLang(lang: string) {
    //check if the selected lang is current lang
    return lang === this._translate.currentLang;
  }
  selectLang(lang) {
    this.selectedLanguage = lang.display;
    this._translate.use(lang.value);
    localStorage.setItem("langPrefrence", JSON.stringify(lang));
    this.refreshText();
  }
  refreshText() {
    // refresh translation when language change
    this.translatedText = this._translate.instant('hello world');
  }
}

错误：

Answer 1

我认为这与TranslatePipe 管道定义有关。您的方法签名如下所示

transform(value: string, args: any[]): any

这意味着，该方法需要 2 个参数。但是，当您通过

调用管道时

{{ 'Password' | translate }}，您实际上只传递了一个参数，因此会发生错误。

请尝试将转换方法定义更改为

transform(value: string, args?: any[]): any

或者只是像这样删除 args 参数

transform(value: string): any.