获取子组件为字符串 [英] Get component child as string
问题描述
对于类似I18n的组件,如果我的I18n服务什么都没有得到,我想以字符串形式获取组件内容以具有备用值,该值应该是备用值.
For an I18n-like component, I want to get a component content as string to have a fallback value in case my I18n service gets nothing, this value is supposed to be a fallback one.
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;
}
I18nComponent:
I18nComponent:
@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>
可以工作,但仅在模板逻辑上有效,我需要一种方法来使孩子在打字稿中成为字符串.
I know <ng-content></ng-content>
works but only on the template logic, I need a way to get child as string in typescript.
已经尝试过@ContentChild(String)
,但是我得到了undefined
.
Already tried @ContentChild(String)
but I got undefined
.
另一种方法是像在索引的基本app
组件中包含的"Loading ..."字符串一样,充当占位符,直到加载完所有内容为止.我可以为I18n做同样的事情,在我从服务人员那里得到一些东西替换它之前,请先将花边保持器放在这里,但我不知道该如何实现.
Another way would be to do it like "Loading..." string you can have in the base app
component in the index, acting like a placeholder until you get everything loaded. I could do the same for I18n, let the laceholder here until I get something from service to replace it, but I don't know how to achieve this.
推荐答案
您不能使用@ContentChildren()
来获取全部内容.您可以添加模板变量并查询其名称:
You can't use @ContentChildren()
to get the whole content. You can either add a template variable and query for its name:
<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);
}
myVar
不会在调用ngAfterContentInit()
之前初始化.
myVar
will not be initialized before ngAfterContentInit()
is called.
或者,您可以查询@ContentChild()
(或@ContentChildren()
)类似的组件类型
Alternatively @ContentChild()
(or @ContentChildren()
) you can query for a components type like
<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);
}
我认为这种方法对您来说会更好
I think this approach will work better for you approach
@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
组件的用户能够使用Angular绑定,组件和指令,则在它们传递给<i18n>
的内容中,则他需要将其包装在模板中.
If you want the users of your i18n
component to be able to use Angular bindings, components, and directives, in the content they pass to <i18n>
, then he needs to wrap it in a template.
<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
这篇关于获取子组件为字符串的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!