获取组件子作为字符串 [英] 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;
    }

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> 可以工作，但仅适用于模板逻辑，我需要一种方法将子项作为打字稿中的字符串.

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 组件中使用该字符串，充当占位符，直到您加载所有内容.我可以为 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 绑定、组件和指令，然后他需要将其包装在模板中.

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/372​​29495/217408

这篇关于获取组件子作为字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！