Question

我有以下问题。如何在@Input()中的angular2翻译ng2-translate？非常感谢任何帮助。如果您对我的代码有任何其他疑问，请询问。

我正在

您的电话号码：123 {{telephone}}

我的代码

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

@Component({
    selector: 'child',
    template: `
        <span> {{ 'Contact.Text' | translate:telNumber:telephone }}</span>
        <input type="text" placeholder="{{ 'Contact.Input' | translate }}">
    `
})

export class ChildComponent implements OnInit {
    @Input() telephone: number; // <- this one 
    telNumber = { value: 123 };
    constructor() { }
    ngOnInit() { }
}

en.json

{
"Navigation": {
    "First": "Main Page",
    "Second": "Menu",
    "Third": "Contact",
    "ChangeLanguage": "Change language"
},
"Mainpage": {
    "Title": "Welcome to the home page",
    "Content": "This home page is the most beautiful homepage you have ever seen"
},
"Menu": {
    "Title": "Animals",
    "FirstAnimal": "Dog",
    "SecondAnimal": "Cat",
    "ThirdAnimal": "Cow",
    "FourthAnimal": "Pig",
    "FifthAnimal": "Bird"
},
"Contact": {
    "Title": "Contact to us",
    "Text": "Your phone number:  {{ value }} {{ telephone }}",
    "Input": "Deutschland Name"
}
}

Answer 1

试试这个

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

@Component({
    selector: 'child',
    template: `
        <span> {{ 'Contact.Text' | translate:telParams }}</span>
        <input type="text" placeholder="{{ 'Contact.Input' | translate }}">
    `
})

export class ChildComponent implements OnInit {
    @Input() telephone: number; // <- this one 
    get telParams() {
      return { value: 123, telephone: this.telephone };
    }
    constructor() { }
    ngOnInit() { }
}

顺便说一下，使用ngx-translate https://github.com/ngx-translate代替ng2-translate。

ng2翻译和@Input（）

1 个答案: