Búsqueda de sitios web

typescript - Angular 2 "Los parámetros suministrados no coinciden con ninguna firma del destino de la llamada" error


Agregué un código de traducción en la aplicación Ionic 2/Angular 2. Ahora, cuando construyo usando ionic build android, obtengo el error Supplied parameters..., pero no especifica qué archivo/línea está causando el error.

translate/traducción.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'
}

servicios/traducir.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)
    }
}

tuberías/filtro.de.traducción

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);
    }
}

páginas/inicio_sesión/inicio_sesión.html

La página de inicio de sesión tiene botones donde el usuario puede seleccionar la preferencia de idioma y se utiliza el filtro translate donde sea necesario.

...

<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>

...

páginas/inicio-sesión/inicio-sesión.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');
  }
}

Errores:

Respuesta #1

Creo que tiene que ver con la definición del pipe TranslatePipe. La firma de tu método se ve así

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

esto significa que el método espera 2 parámetros. Sin embargo, cuando llamas a pipe mediante

{{ 'Password' | translate }}, esencialmente solo pasas un parámetro y por eso ocurre el error.

Por favor, intente cambiando la definición del método transform

transformar(valor: string, args?: any[]): any

o simplemente eliminando el parámetro args así

transformar(valor: string): any.