How do I obtain a HTML Label's runtime value for use in TypeScript (in Angular)?-CodePudding

I have the following label with an i18n (internationalization) element:

<label i18n="@@replacingValue">Default value</label>

At runtime, the "Default value" text of this label is replaced with the value given by its i18n element, and I need to obtain that value for usage in my TypeScript code, but how?

I've tried to pass it from the HTML to TypeScript through @Input, as such:

In the .HTML file:

<label i18n-[labelValue]="@@replacingValue" i18n="@@replacingValue">Default value</label>

In the .TS file:

@Input('labelValue') labelValue: string;

But the variable I tried to store it in remains "undefined". How do I get the correct value if, for example, I want to do this in TypeScript:

console.log(this.labelValue)

CodePudding user response：

You can use ViewChild to manipulate dom elements:

html file:

<label #myLabel i18n="@@replacingValue">Default value</label>

ts file:

@ViewChild('myLabel') el: ElementRef;

ngAfterViewInit() {
  console.log(this.el.nativeElement);
}

After getting the elements you can iterate the attributes and handle i18n however you want