What is the correct way to merge standalone component specific translations

[UchihaYuki]

Let's say, I have a UI library, and each standalone component in it has its own translations (either static or dynamic). I want to implement two functions:

1. Use the default translations embedded in the library.
2. Modify the translations of specified keys of the library in app.

[UchihaYuki]

I kind of find the way to achieve the 1st function, not pretty elegant though:

@Component({
  selector: 'app-standalone',
  standalone: true,
  imports: [CommonModule, TranslateModule],
  providers: [
    TranslateModule.forChild({
      isolate: false,
      extend: true,
      loader: {
        provide: TranslateLoader,
        useValue: {
          getTranslation: (lang: string) => {
            const t: any = {
              en: {
                'standalone.p.introduction': 'Introduction',
              },
              zh: {
                'standalone.p.introduction': '介绍',
              },
            };
            return of(t[lang]);
          },
        },
      },
    }).providers!,
  ],
  templateUrl: './standalone.component.html',
  styleUrl: './standalone.component.scss',
})
export class StandaloneComponent {
  constructor(translate: TranslateService, ls: LangService) {
    translate.addLangs(config.common.supportLangs);
    translate.setDefaultLang(config.common.supportLangs[0]);

    // trigger calling of TranslateLoader.getTranslation
    const t = translate.currentLang;
    translate.currentLang = ''; // used when isolate: false
    translate.use(t);
  }
}

I still have no clue how to achieve the 2nd funciton.