以字符串形式获取子组件

Question

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

我知道 <ng-content></ng-content> 有效，但仅在模板逻辑上有效，我需要一种方法将 child 作为打字稿中的字符串。

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

另一种方法是像 "Loading..." 字符串那样做，您可以在索引的基础 app 组件中使用它，在加载所有内容之前充当占位符。我可以为 I18n 做同样的事情，让花边夹在这里直到我从服务中得到一些东西来替换它，但我不知道如何实现这个。

Answer 1

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

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

如

中所述

以字符串形式获取子组件

Get component child as string

angular2-template

angular