Javascript 像元素属性中的函数一样使用AngularJS 2组件

嗨，伙计们

我正在学习AngularJS2一段时间，现在正在基于Laravel5RESTAPI创建我自己的应用程序。无论如何，这不是很重要

重要的是，我想为整个应用程序提供翻译，我发现了一个很难解决的问题

所以-从一开始。。。我创建了我的资源服务，用于翻译字符串：

getTranslation ( key: string, replace: Array<TranslationReplace> = null, locale: string = null, fallback: boolean = null ): Observable<Resource> {

    var params = "key=" + key +
        ( replace ? "&replace=" + JSON.stringify(replace) : '') +
        ( locale ? "&locale=" + locale : '') +
        ( fallback ? "&fallback=" + fallback : '');
    var headers = new Headers({'Content-Type':'application/x-www-form-urlencoded'});

    return this.http.post(this.apiUrl + 'getTranslation', params, {headers: headers})
        .map(this.extractData)
        .startWith({ name: 'Loading...', value: 'Translating...' })
        .catch(this.handleError);

}

getTranslation（key:string，replace:Array=null，locale:string=null，fallback:boolean=null）：可观察{
var params=“key=”+key+
（替换？&replace=“+JSON.stringify（替换）：”）+
（区域设置？&locale=“+locale:”）+
（回退？&fallback=“+回退：“”）；
var headers=新的头（{'Content-Type'：'application/x-www-form-urlencoded'}）；
返回this.http.post（this.apirl+'getTranslation'，params，{headers:headers}）
.map（此.extractData）
.startWith（{name:'Loading…'，value:'Translating…}）
.接住（这个.把手错误）；
}

我创建了一个提供翻译的TranslateComponent，下面是整个组件：

import {Component, Input, Injectable, OnInit, OnChanges, SimpleChange} from "@angular/core";
import {ResourcesService} from "../services/resources.service";
import {TranslationReplace} from "../models/TranslationReplace";

@Component({
    selector: 'translate',
    template: `{{translation}}`
})

@Injectable()
export class TranslateComponent implements OnInit, OnChanges {

    @Input() ref: string;
    @Input() replace: Array<TranslationReplace>;
    @Input() locale: string;
    @Input() fallback: boolean;

    private translation: string;
    constructor(private resourcesService: ResourcesService) {}

    ngOnInit() : void {
        this.getTranslation();
    }

    ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
        for (let propName in changes) {
            if(propName == 'replace') {
                this.getTranslation();
            }
        }
    }

    private getTranslation(): void {
        this.resourcesService.getTranslation(this.ref, this.replace, this.locale, this.fallback).forEach(translation => this.translation = translation.value );
    }
}

import{Component，Input，Injectable，OnInit，OnChanges，SimpleChange}来自“@angular/core”；
从“./services/resources.service”导入{ResourcesService}；
从“./models/TranslationReplace”导入{TranslationReplace}；
@组成部分({
选择器：“translate”，
模板：`{translation}}`
})
@可注射（）
导出类TranslateComponent实现OnInit、OnChanges{
@Input（）ref:string；
@Input（）替换：数组；
@输入（）语言环境：字符串；
@Input（）回退：布尔值；
私人翻译：字符串；
构造函数（私有资源服务：资源服务）{}
ngOnInit（）：void{
这个。getTranslation（）；
}
ngOnChanges（更改：{[propKey:string]：SimpleChange}）{
for（让propName进行更改）{
如果（propName==“替换”）{
这个。getTranslation（）；
}
}
}
private getTranslation（）：void{
this.resourcesService.getTranslation（this.ref、this.replace、this.locale、this.fallback）.forEach（translation=>this.translation=translation.value）；
}
}

一切都很完美，要进行翻译，我只需像这样调用选择器：

<translate [ref]="'string.to_translate'"></translate>

<input type="text" [(ngModel)]="input" #input="ngModel [translate]="'string.to_translate'" [translateAttr]="'placeholder'">

但是

现在我想在属性中使用转换

因此，我找到了一种丑陋的方法，通过创建翻译的引用并在属性中调用它来实现它。但这很恶心

首先，我需要将此位添加到我的模板中：

<translate [ref]="'string.to_translate'" style="display:none;" #myStringTranslation></translate>

接下来在我的元素中调用它并通过引用请求属性：

<input type="text" [(ngModel)]="input" #input="ngModel [placeholder]="myStringTranslation.translation">

---

谢谢你的帮助

您可以将其转换为属性指令：

@Directive({
  selector: 'translate'
})
export class TranslateDirectiev {
  @Input() translate: string;

  constructor(private elRef: ElementRef){}

  ngOnChanges(changes: SimpleChanges): void {
       if(this.translate){
          var translatedText: string = translateSvc.translate(this.translate);
          this.renderer.setElementProperty(this.elementRef.nativeElement, 'innerHTML', translatedText);
      }
  }

}

---

这是一个没有服务注入的简单示例。此外，对于输入字段，您可能需要采用不同的方法并更新value属性，而不是innerHtml

没有“AngularJS 2”，该名称适用于Angular 1.x。谢谢！你的回答和这个帮助我解决了这个问题。非常感谢，老兄！

@Directive({
  selector: 'translate'
})
export class TranslateDirectiev {
  @Input() translate: string;

  constructor(private elRef: ElementRef){}

  ngOnChanges(changes: SimpleChanges): void {
       if(this.translate){
          var translatedText: string = translateSvc.translate(this.translate);
          this.renderer.setElementProperty(this.elementRef.nativeElement, 'innerHTML', translatedText);
      }
  }

}