对于类似 I18n 的组件,我想将组件内容作为字符串获取为具有回退值,以防我的 I18n 服务一无所获,此值应该是回退值。
I18n服务get
方法:
public get(key:string,
defaultValue?:string,
variables:Variables = {},
domain?:string):string {
for (let catalogue of this.catalogues) {
if (catalogue.getDomains().indexOf(domain) >= 0
&& catalogue.getLocale() == this.locale
&& catalogue.hasKey(key)) {
return I18n.setVariables(catalogue.get(key, domain, defaultValue).value, variables);
}
}
return defaultValue;
}
I18n组件:
@Component({
selector: "i18n",
template: "{{text}}",
})
export class I18nComponent implements OnInit {
constructor(private i18n:I18n) {
}
@ContentChild() content:string; //Here, I want to store actual value as fallback one.
@Input('key') key:string;
@Input('domain') domain:string;
@Input('variables')
variables:Variables = [];
@Input("plural")
plural:number;
text:string;
ngOnInit():any {
console.log(this.content); //Here I get 'undefined'
if (this.plural !== undefined && this.plural != null) {
this.text = this.i18n.get(this.key, this.content, this.variables, this.domain);
} else {
this.text = this.i18n.getPlural(this.key, this.plural, this.content, this.variables, this.domain);
}
}
}
使用示例:
<i18n key="FOO_KEY" domain="stackoverflow">I'm the default value !</i18n>
我知道<ng-content></ng-content>
有效,但仅在模板逻辑上,我需要一种方法在打字稿中将孩子作为字符串。
已经尝试过@ContentChild(String)
但我得到了undefined
.
另一种方法是像"正在加载..."可以在索引的基app
组件中包含的字符串,在加载所有内容之前充当占位符。我可以为 I18n 做同样的事情,让花边架在这里,直到我从服务中获得一些东西来更换它,但我不知道如何实现这一目标。
您不能使用 @ContentChildren()
来获取整个内容。您可以添加模板变量并查询其名称:
<i18n key="FOO_KEY" domain="stackoverflow"><span #myVar>I'm the default value !</span></i18n>
@ContentChild('myVar') myVar;
ngAfterContentInit() {
console.log(this.myVar.nativeElement.innerHTML);
}
在调用 ngAfterContentInit()
之前不会初始化myVar
。
或者,@ContentChild()
(或@ContentChildren()
)您可以查询组件类型,例如
<i18n key="FOO_KEY" domain="stackoverflow"><my-comp>I'm the default value !</my-comp></i18n>
@ContentChild(MyComponent, {read: ElementRef}) mycomp;
ngAfterContentInit() {
console.log(this.myVar.nativeElement.innerHTML);
}
我认为这种方法更适合您的方法
@Component({
selector: "i18n",
template: "<div #wrapper hidden="true"><ng-content></ng-content><div>{{text}}",
})
export class I18nComponent implements OnInit {
constructor(private i18n:I18n) {
}
@ViewChild('wrapper') content:ElementRef; //Here, I want to store actual value as fallback one.
@Input('key') key:string;
@Input('domain') domain:string;
@Input('variables')
variables:Variables = [];
@Input("plural")
plural:number;
text:string;
ngAfterViewInitInit():any {
console.log(this.content.nativeElement.innerHTML);
if (this.plural !== undefined && this.plural != null) {
this.text = this.i18n.get(this.key, this.content, this.variables, this.domain);
} else {
this.text = this.i18n.getPlural(this.key, this.plural, this.content, this.variables, this.domain);
}
}
}
如果您希望i18n
组件的用户能够在他们传递给<i18n>
的内容中使用 Angular 绑定、组件和指令,那么他需要将其包装在模板中。
<i18n key="FOO_KEY" domain="stackoverflow">
<template>
I'm the {{someName}}!
<my-comp (click)="doSomething()"></my-comp>
</template>
</i18n>
就像 https://stackoverflow.com/a/37229495/217408 中解释的那样