Получить компонент child как строку

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; 
    } 

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> работает, но только на логике шаблона, мне нужен способ чтобы получить дочерние строки в машинописном тексте.

Уже пробовали @ContentChild(String), но я получил undefined.

Другим способом было бы сделать это как строку «Загрузка ...», которую вы можете иметь в базе app компонент в индексе, действуя как заполнитель, пока не получите все загруженное. Я мог бы сделать то же самое для I18n, позвольте кружевнику здесь, пока я не получу что-то из службы, чтобы заменить его, но я не знаю, как этого добиться.

Answer 1

Вы не можете использовать @ContentChildren(), чтобы получить весь контент. Вы можете добавить переменную шаблона и запрос на его имя:

<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() называется.

В качестве альтернативы @ContentChild() (или @ContentChildren()) вы можете запрашивать компоненты типа как

<i18n key="FOO_KEY" domain="stackoverflow"><my-comp>I'm the default value !</span></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>, тогда ему нужно обернуть его в шаблон.

<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