如何在angular 12中使用ngx-translate和i8n为我的angular应用创建自定义管道?

Question

我在我的angular项目中做国际化，就像使用@ngx-translate的管理门户，但我失败了。我想重做整个国际化任务，有什么建议吗

auth.component.html

这里我得到错误-错误NG8004:没有找到名称为'translate'的管道。

<div class="container">
<div class="forms-container">
<div class="signin-signup">
<form [formGroup]="LoginFrom" (ngSubmit)="Login()" class="sign-in-form">
<label>Change Language </label>
<select #selLang (change)="translateLanguageTo(selLang.value)">
<option *ngFor="let language of translate.getLangs()" [value]="language">{{ language }}</option>
</select>
<h2 class="title">{{'login' | translate}} </h2>
<h4>{{'login_text' | translate}}</h4>
<div class="input-field">
<i class="fa fa-user"></i>
<input (ngModelChange)="start_validaiton_Login_Form('Username')" formControlName="Username" type="text"
placeholder="Username"/>
<mat-icon *ngIf="!Login_Username!.invalid && started_Login_Username" class="textbox-icon">check_circle</mat-icon>
<mat-icon *ngIf="Login_Username!.invalid && started_Login_Username" class="textbox-icon error">error</mat-icon>
</div>
<div class="input-field">
<i class="fa fa-lock"></i>
<input (ngModelChange)="start_validaiton_Login_Form('Password')" formControlName="Password" type="password"
placeholder="Password" />
<mat-icon *ngIf="!Login_Password!.invalid && started_Login_Password" class="textbox-icon">check_circle</mat-icon>
<mat-icon *ngIf="Login_Password!.invalid && started_Login_Password" class="textbox-icon error">error</mat-icon>
</div>
<input [disabled]="!LoginFrom.valid" type="submit" value="Login" class="btn solid" />
</form>
</div>

auth.component.ts

import { TranslateService } from '@ngx-translate/core';
import { TranslatePipe } from '@app/pipes/translate.pipe';
@Component({
selector: 'app-auth',
templateUrl: './auth.component.html',
styleUrls: ['./auth.component.scss']
})
export class AuthComponent implements OnInit {
constructor(private router: Router, private toastr: ToastrService, private _AuthService: AuthService, 
public translate: TranslateService
){
// Register translation languages
translate.addLangs(['en', 'er', 'fr']);
// Set default language
translate.setDefaultLang('en');
} 
//Switch language
translateLanguageTo(lang: string) {
this.translate.use(lang);
}

app.module.ts

import { TranslateService } from '@ngx-translate/core';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import {TranslatePipe} from '@app/pipes/translate.pipe'
// Factory function required during AOT compilation
export function httpTranslateLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
@NgModule({
declarations: [
AppComponent,
UserPermissionsComponent,
TranslatePipe
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: httpTranslateLoaderFactory,
deps: [HttpClient]
}
}),

我也尝试通过从stakoverflow获得帮助来创建翻译管道，但错误仍然是一样的，因为我是新的角度，我不知道自定义管道

Answer 1

你得到的错误是因为angular不能识别管道。可能有很多原因导致这种情况，首先你不需要TranslatePipe在你的declarations中，也要确保你在正确的模块中加载TranslateModule(在你的imports中)，也就是说，在AuthComponent被声明的模块中(在declarations字段中)。

Answer 2

在ngx-translate中你不需要创建自定义管道。
您应该重命名组件中的翻译服务。因为它与翻译管道同名，而且是公共的，所以HTML会混淆翻译管道和公共翻译服务。