我在使用 ngx 翻译翻译网站时遇到错误。错误： NG0100： 表达式更改后已检查错误

Question

在使用ngx翻译包翻译网站时出现错误。核心。mjs:7643 ERROR错误:NG0100: ExpressionChangedAfterItHasBeenCheckedError:表达式被检查后发生了变化。前一个值:'可能加起来少于3个字符'。当前值:"使用至少3个符号"。在简单地翻译页面时，我得到一个错误，表示表达式在验证后已被更改。我该如何修复这种行为?

我组件:

<app-welcome-form>
<form (submit)="userRegister($event)" class="container" [formGroup]="form">
<mat-form-field
hintLabel="{{ 'SIGNUP.USERNAME_HINT' | translate: { value: 3 } }}"
appearance="fill"
>
<mat-label>{{ "SIGNUP.USERNAME" | translate }}</mat-label>
<input
matInput
#input
placeholder="{{ 'SIGNUP.USERNAME' | translate }}"
name="username"
formControlName="username"
/>
</mat-form-field>
<app-password-field
titleOfField="{{ 'SIGNUP.PASSWORD' | translate }}"
[hintLabel]="'SIGNUP.PASSWORD_HINT' | translate: { value: 6 }"
[name]="'password'"
[formCtrl]="$any(form.controls['password'])"
></app-password-field>
<app-password-field
titleOfField="{{ 'SIGNUP.CONFIRMATION' | translate }}"
[hintLabel]="'SIGNUP.PASSWORD_HINT' | translate: { value: 6 }"
[name]="'password'"
[formCtrl]="$any(form.controls['passwordConfirmation'])"
></app-password-field>
<button class="signup-btn" mat-raised-button color="primary" type="submit">
{{ "SIGNUP.SIGNUP" | translate }}
</button>
</form>
<p class="is-member">{{ "SIGNUP.MEMBER" | translate }}</p>
<a [routerLink]="'/' + loginPath">{{ "SIGNUP.SIGNIN" | translate }}</a>
<app-language-switcher></app-language-switcher>
</app-welcome-form>

和翻译它的函数(一个简单的视觉示例函数):

ngOnInit(): void {
this.translateService.use('en');
}
changeLanguage() {
if (this.language === 'en') {
this.translateService.use('en');
}
this.translateService.use('ua');
}

任何想法都会有帮助。

Answer 1

将一个ChangeDetectorRef的实例注入到你的组件构造函数中，像这样

constructor(private cdref: ChangeDetectorRef) {}

然后在ngOnInit生命周期钩子中像下面这样调用detectChanges()

ngOnInit(): void {
this.translateService.use('en');
this.cdref.detectChanges();
}

上述方法可以消除错误，但效果并不好。请注意，您不应该创建TranslateService的多个实例，并且非常希望您为它创建一个单例对象并只调用一次您想要的方法(在app.component.ts的constructor中，例如)。

Answer 2

当我在TranslateModule配置对象中设置属性defaultLanguage时，它对我有效。

Answer 3

我曾经有一个共享模块，它被导入到每个特定的模块中。在这个共享模块中，我输入导入TranslateModule:

TranslateModule.forRoot({
defaultLanguage: 'en',
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient, HttpHandler]
}

和在同一模块中export这TranslateModule。

这样我就不会收到这种消息了。