Angular 2 "Supplied parameters do not match any signature of call target" 错误
Angular 2 "Supplied parameters do not match any signature of call target" error
我在 Ionic 2/Angular 2 应用程序上添加了翻译代码。现在,当我使用 ionic build android
进行构建时,我得到了 Supplied parameters...
错误,但它并不具体是哪个 file/line 导致了错误。
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
}
];
translate/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)
}
}
pipes/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
登录页面有按钮,用户可以在其中 select 语言首选项,并在需要的地方使用 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');
}
}
错误:
我认为这与 TranslatePipe
管道定义有关。您的方法签名如下所示
transform(value: string, args: any[]): any
这意味着,该方法需要 2 个参数。但是,当您通过
调用管道时{{ 'Password' | translate }}
,你实际上只传递了一个参数,因此错误发生了。
请尝试将转换方法定义更改为
transform(value: string, args?: any[]): any
或者像这样删除 args 参数
transform(value: string): any
.