如何使用内置的angular i18n对innerHtml进行国际化

npm install @angular/localize

import { LOCALE_ID } from '@angular/core';

@NgModule({
  providers: [{ provide: LOCALE_ID, useValue: 'en' }],
  // ...
})
export class AppModule { }

<div i18n="@@welcomeMessage">Welcome to my app!</div>

import { Component } from '@angular/core';
import { $localize } from '@angular/localize';

@Component({
  // ...
})
export class MyComponent {
  welcomeMessage = $localize`:@@welcomeMessage:Welcome to my app!`;
}

<div>{{ welcomeMessage }}</div>

"i18n": {
  "sourceLocale": "en",
  "locales": {
    "fr": "src/locale/messages.fr.xlf"
  }
},
"i18nLocale": "fr",
"i18nFormat": "xlf"

ng extract-i18n --output-path src/locale --format xlf

<trans-unit id="welcomeMessage" datatype="html">
  <source>Welcome to my app!</source>
  <target>Bienvenue dans mon application !</target>
</trans-unit>