在 Angular 18 中使用 ngx-translate 时翻译管道无法正确导入

Question

我尝试在 Angular 18 中使用 ngx-translate 库，但当我尝试使用 Translate 管道时，它在 app.component.ts 文件中给出以下错误消息。

我试图最终显示一些翻译的文本，我首先希望能够使用翻译管道。

The pipe 'TranslatePipe' appears in 'imports', but is not standalone and cannot be imported directly. It must be imported via an NgModule.

我的app.component.ts：

import { Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterOutlet } from '@angular/router';
import { WishItem } from '../shared/models/wishItem';
import { WishListComponent } from './wish-list/wish-list.component';
import { AddWishFormComponent } from './add-wish-form/add-wish-form.component';
import { WishFilterComponent } from "./wish-filter/wish-filter.component";
import { EventService } from "./../shared/services/EventService"
import {TranslateModule, TranslateLoader, TranslateService, TranslatePipe} from '@ngx-translate/core';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, CommonModule, FormsModule, WishListComponent, 
    AddWishFormComponent, WishFilterComponent, TranslatePipe],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  // name of your property/variable, followed by a colon, and then the type 
  items : WishItem[] = [
    new WishItem("Learn Angular"),
    new WishItem("Get Coffee", true),
    new WishItem("Find grass that cuts itself")
  ];


  constructor(events: EventService, public translate: TranslateService){
    events.listen("removeWish", (wish : any) => {
      let index = this.items.indexOf(wish)
      this.items.splice(index)
    })
    translate.addLangs(['en', 'fr']);
    translate.setDefaultLang('en');

    const browserLang = translate.getBrowserLang();
    if(browserLang != null){
      translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
    }
  }

  changeLanguage(lang: string) {
    this.translate.use(lang);
  }

  title = "wishlist"

  filter : any;
}

我的app.component.html：

<div>
  <h2>{{ 'HOME.TITLE' | translate }}</h2>
  <label>
    {{ 'HOME.SELECT' | translate }}
    <select #langSelect (change)="translate.use(langSelect.value)">
      <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
    </select>
  </label>
</div>

<div class="container">

  <add-wish-form
    (addWish) = "items.push($event)"
  ></add-wish-form>

  <div class="row mt-3">
    <wish-filter
      [(filter)] = "filter"
    ></wish-filter>
  </div>

  <div class="row mt-3">
    <div class = "col-sm-4">
      <wish-list
        [wishes] = "items.filter(filter)"
      >
    </wish-list>
    </div>
  </div>

  

  
</div>


<router-outlet />

根据这篇文章，为什么 Angular 17 中不存在应用程序模块？，似乎 Angular 团队“强烈建议”使用独立组件，因此远离模块，所以我也很困惑为什么需要模块。

Answer 1

翻译管道不是独立的管道，因此您被限制不能在导入级别使用它，您可以在其 github 上请求它是独立的，但这可能是由于某个原因，例如对翻译服务的依赖。但检查这一点的最佳位置是在他们的 github 存储库上。

---

尝试将

TranslatePipe

替换为

TranslateModule

，其中包含导入内的管道，您可以通过导入模块直接使用它。

import {TranslateModule, TranslateLoader, TranslateService, TranslatePipe} from '@ngx-translate/core';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    ...,
    TranslateModule, // <- changed here!
    ...
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {