Angular 以字符串形式获取组件子级
对于类似于I18n的组件,我希望获得一个组件内容作为字符串,以便有一个回退值。如果我的I18n服务什么也得不到,这个值应该是回退值 I18n服务Angular 以字符串形式获取组件子级,angular,angular2-template,Angular,Angular2 Template,对于类似于I18n的组件,我希望获得一个组件内容作为字符串,以便有一个回退值。如果我的I18n服务什么也得不到,这个值应该是回退值 I18n服务get方法: public get(键:string, defaultValue?:字符串, 变量:变量={}, 域?:字符串):字符串{ (让我们来看看这个目录){ 如果(catalog.getDomains().indexOf(domain)>=0 &&catalog.getLocale()==this.locale &&目录.hasKey(key)
get
方法:
public get(键:string,
defaultValue?:字符串,
变量:变量={},
域?:字符串):字符串{
(让我们来看看这个目录){
如果(catalog.getDomains().indexOf(domain)>=0
&&catalog.getLocale()==this.locale
&&目录.hasKey(key)){
返回I18n.setVariables(catalog.get(key,domain,defaultValue).value,variables);
}
}
返回默认值;
}
I18N成分:
@组件({
选择器:“i18n”,
模板:“{{text}}”,
})
导出类I18nComponent实现OnInit{
构造函数(专用i18n:i18n){
}
@ContentChild()content:string;//这里,我想将实际值存储为回退值。
@输入('key')键:字符串;
@输入('domain')域:字符串;
@输入('变量')
变量:变量=[];
@输入(“复数”)
复数:数字;
文本:字符串;
ngOnInit():任何{
console.log(this.content);//这里我得到了“undefined”
if(this.复数!==未定义&&this.复数!=null){
this.text=this.i18n.get(this.key、this.content、this.variables、this.domain);
}否则{
this.text=this.i18n.getPlural(this.key,this.plural,this.content,this.variables,this.domain);
}
}
}
用法示例:
我是默认值!
我知道
可以工作,但只在模板逻辑上工作,我需要一种在typescript中将child作为字符串获取的方法
已经尝试了@ContentChild(String)
,但是我得到了未定义的
另一种方法是像“加载…”字符串一样执行,您可以在索引中的baseapp
组件中使用该字符串,在加载所有内容之前充当占位符。我也可以对I18n做同样的事情,让鞋带架放在这里,直到我从服务中得到一些东西来更换它,但我不知道如何做到这一点。你不能使用@ContentChildren()
来获取全部内容。您可以添加模板变量并查询其名称:
我是默认值!
@ContentChild('myVar')myVar;
ngAfterContentInit(){
log(this.myVar.nativeElement.innerHTML);
}
myVar
在调用ngAfterContentInit()
之前不会初始化
或者@ContentChild()
(或@ContentChildren()
)您可以查询以下组件类型
我是默认值!
@ContentChild(MyComponent,{read:ElementRef})mycomp;
ngAfterContentInit(){
log(this.myVar.nativeElement.innerHTML);
}
我认为这种方法对你更有效
@组件({
选择器:“i18n”,
模板:“{{text}}”,
})
导出类I18nComponent实现OnInit{
构造函数(专用i18n:i18n){
}
@ViewChild('wrapper')content:ElementRef;//在这里,我想将实际值存储为回退值。
@输入('key')键:字符串;
@输入('domain')域:字符串;
@输入('变量')
变量:变量=[];
@输入(“复数”)
复数:数字;
文本:字符串;
ngAfterViewInit():任何{
log(this.content.nativeElement.innerHTML);
if(this.复数!==未定义&&this.复数!=null){
this.text=this.i18n.get(this.key、this.content、this.variables、this.domain);
}否则{
this.text=this.i18n.getPlural(this.key,this.plural,this.content,this.variables,this.domain);
}
}
}
如果您希望i18n
组件的用户能够在传递给
的内容中使用角度绑定、组件和指令,那么他需要将其包装在模板中
我是{{someName}}!
就像中解释的那样,我不明白你想要实现什么。这与您的I18n服务有什么关系?为什么不把回退值也放到类中,然后绑定服务中的回退值,如果不可用,就绑定回退值?我不能在类中设置回退值,因为它每次都不相同。对于每个i18n组件的使用,我都有一个后备方案,它可能包括html标记。(例如:你赢了
->退却=你赢了
)。这里的后备方案是“以防万一”,然后,如果我没有通过服务获得值,我将显示英文版本(后备方案)。请添加完整的示例。我没有从你的问题中得到你想要达到的目标。@GünterZöchbauer我更新了这个问题以提供一个完整的例子。奇怪的是,我不得不把{{text}}
放在模板的前面而不是末尾。