获取组件子作为字符串

Posted 2023-03-13

【中文标题】获取组件子作为字符串

【英文标题】：Get component child as string

【发布时间】：2016-10-01 02:29:07

【问题描述】：

对于一个类似 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="***">I'm the default value !</i18n>

我知道<ng-content></ng-content> 有效，但仅适用于模板逻辑，我需要一种方法在 typescript 中获取子字符串。

已经尝试过@ContentChild(String)，但我得到了undefined。

另一种方法是像“正在加载...”字符串一样，您可以在索引中的基本app 组件中拥有它，就像一个占位符一样，直到您加载所有内容。我可以为 I18n 做同样的事情，让花边固定器放在这里，直到我从服务部门得到一些东西来替换它，但我不知道如何实现这一点。

【问题讨论】：

我不明白你试图完成什么。这与您的 I18n 服务有什么关系？为什么不只是将回退值也放入类中，然后从服务中绑定该值，如果不可用，则回退？

我无法在类中设置后备值，因为它每次都不一样。我对每个 i18n 组件的使用都有一个后备，它可能包括 html 标签。 （例如：<i18n key="WIN"><b>You</b> won</i18n> -> 后备 = <b>You</b> won）。后备在这里“以防万一”，然后，如果我没有通过服务获得价值，我将显示英文（后备）。

您能否添加一个完整的示例。我没有从你的问题中得到你到底想要完成什么。

@GünterZöchbauer 我更新了问题以提供完整示例。

【参考方案1】：

您不能使用@ContentChildren() 获取全部内容。您可以添加模板变量并查询其名称：

<i18n key="FOO_KEY" domain="***"><span #myVar>I'm the default value !</span></i18n>

@ContentChild('myVar') myVar;

ngAfterContentInit() 
  console.log(this.myVar.nativeElement.innerHTML);

myVar 在调用ngAfterContentInit() 之前不会被初始化。

或者@ContentChild()（或@ContentChildren()）您可以查询类似的组件类型

    <i18n key="FOO_KEY" domain="***"><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="***">
      <template>
        I'm the someName!
        <my-comp (click)="doSomething()"></my-comp>
      </template>
    </i18n>

就像https://***.com/a/37229495/217408中解释的那样

【讨论】：

奇怪的是，我不得不将text 放在模板的前面而不是末尾。