如何在Angular 12中使用NGX-Translate和I8N为Angular应用创建自定义管道

Question

我正在Angular项目中进行国际化，就像使用 @ngx-translate一样管理门户，但我失败了。我想重做整个国际化任务的任何建议

auth.component.html

在这里我会遇到错误 - 错误NG8004：找不到名称为“翻译”的管道。

<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获得帮助来创建翻译管道，但错误仍然与我对Angular的新手相同对自定义管道不知道

Answer 1

您遇到的错误是因为Angular无法识别管道。情况可能有很多原因，首先，您不需要translatepipe在声明中，还要确保加载translatemodule（在您的imports中）在正确的模块中，即声明authcomponent的模块（在neclarations字段中）。

Answer 2

在NGX-Translate中，您不必创建自定义管道。
您应该在component.ts中重命名翻译服务，因为它与翻译管道的名称相同，并且是公开的，因此HTML在翻译管道和公共翻译服务之间变得混淆。