如何使用ngx translate翻译angular material snackbar中的文本

npm install @ngx-translate/core @ngx-translate/http-loader --save

ng add @angular/material

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    // ... your components here
  ],
  imports: [
    // ... other modules here
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      },
    }),
    // ... Angular Material modules here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

{
  "SNACKBAR_MESSAGES": {
    "SUCCESS": "Operation successful!",
    "ERROR": "An error occurred."
  }
}

{
  "SNACKBAR_MESSAGES": {
    "SUCCESS": "操作成功！",
    "ERROR": "发生错误。"
  }
}

import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private snackBar: MatSnackBar, private translate: TranslateService) {}

  showSnackbar(messageKey: string) {
    this.translate.get(messageKey).subscribe((translatedMessage) => {
      this.snackBar.open(translatedMessage, 'Close', {
        duration: 3000,
      });
    });
  }
}

// 在某个事件处理函数中
this.showSnackbar('SNACKBAR_MESSAGES.SUCCESS');