要在两个作用域中读取 Transloco,可以使用 TranslocoService 提供的 observe 方法和 async 管道。
首先,在组件中注入 TranslocoService:
import { TranslocoService } from '@ngneat/transloco';
constructor(private translocoService: TranslocoService) {}
然后,在两个作用域中分别使用 observe 方法来监听 Transloco 的翻译值:
// 在第一个作用域中监听 Transloco 的翻译值
translation1$ = this.translocoService.selectTranslate('key1').pipe(
tap(translation => {
console.log('Translation in scope 1:', translation);
})
);
// 在第二个作用域中监听 Transloco 的翻译值
translation2$ = this.translocoService.selectTranslate('key2').pipe(
tap(translation => {
console.log('Translation in scope 2:', translation);
})
);
最后,在模板中使用 async 管道来订阅这两个观察者:
{{ translation1$ | async }}
{{ translation2$ | async }}
这样,无论在哪个作用域中修改了 Transloco 的翻译值,两个作用域中的显示都会自动更新。