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

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

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

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

Ответы

Ответ 1

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

  < i18n key = "FOO_KEY" domain = "stackoverflow" > < span # myVar > Я значение по умолчанию! </span> </i18n>
Код>
  @ContentChild ('myVar') myVar;

ngAfterContentInit() { console.log(this.myVar.nativeElement.innerHTML);
}
Код>

myVar не будет инициализирован до вызова ngAfterContentInit().

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

  < i18n key = "FOO_KEY" domain = "stackoverflow" > < my-comp > Я значение по умолчанию! </my- Comp > </i18n>

@ContentChild (MyComponent, {read: ElementRef}) mycomp;

ngAfterContentInit() { console.log(this.myVar.nativeElement.innerHTML);
}
Код>

Я думаю, что этот подход будет работать лучше, если вы подходите к

  @Component ({   селектор: "i18n",   template: "< div #wrapper hidden =" true "> < n-content > </ng-content > <div> {{text}}",
})
класс экспорта I18nComponent реализует OnInit {
   конструктор (private i18n: I18n) {   }
   Содержимое @ViewChild ('wrapper'): ElementRef;//Здесь я хочу сохранить фактическое значение как резервное.
   @Input ( "ключ" ): строка;
   @Input ('domain') domain: string;
   @Input ( 'переменные')   переменные: Variables = [];
   @Input ( "множественное число" )   множественное число: число;
   текст: строка;
   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" >     < & шаблон GT;       Я {{someName}}!       < my-comp (click) = "doSomething()" > </my-comp >     </шаблон >   </i18n>
Код>

как описано в fooobar.com/info/28853/...