Question

我是一个初学者，请耐心等待我！

不知道该怎么做才能使此功能生效！正在搜索，但没有答案可以帮助我。

管道正在我的餐厅注册页面中运行，但是无法在我的餐厅信息组件（在restaurant-register.html中使用）上使用。

这是我的文件： app.module.ts ...

import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
import {TranslateHttpLoader} from "@ngx-translate/http-loader";
import {HttpClient, HttpClientModule} from "@angular/common/http";
...
imports: [
          HttpClientModule,
          TranslateModule.forRoot({
            loader: {
              provide: TranslateLoader,
              useFactory: (HttpLoaderFactory),
              deps: [HttpClient]
            }
          }),
...
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

register-restaurant.html -完美运行

<ion-content padding margin-top="2em">
  <restaurant-info #restaurantInfo></restaurant-info>

  <button ion-button full
          type="submit"
          [disabled]="!theRestaurant.signupRestaurantForm.valid"
          (click)="onSubmit(theRestaurant.signupRestaurantForm.valid)">
    <ion-icon name="archive"></ion-icon>&nbsp;{{'Save' | translate}} 
  </button>

...

restaurant-info.html -我在哪里收到“找不到管道'translate'”错误 ...

<ion-list>
    <h1>{{'Restaurant Name' | translate}}</h1>

...

restaurant-info.ts文件中没有“ import {TranslateService}”，因为我只需要在html文件中使用translation。即使我导入它，也没关系！

我需要做什么？

Answer 1

尝试在RestaurantModule中导入TranslateModule

Answer 2

一种解决方案（也许不是最优雅）是使用TranslateService的get（）方法。

在ts文件中创建一个函数以进行贴合：

private translateKey(key: string): string {
    let translated = '';
    this.translateService.get(key).subscribe(text => translated = text);
    return translated;
}

现在在html模板视图中使用translateKey函数：

<strong>{{translateKey('Name:')}}</strong> {{store.clientName}}

现在它正在工作...

未捕获的错误：模板解析错误：找不到管道“翻译”-角度为6的离子3

2 个答案: