未捕获错误：模板解析错误：找不到管道'translate' - 离子 3 与角度 6

Question

我是一名工程师，请耐心等待！！

不知道该怎么做才能让这件事成功！一直在寻找，但没有答案能帮助我。

管道在我的餐厅注册页面上工作，但不能在我的餐馆信息组件上使用(在餐厅注册.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');
}

注册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文件中使用translate。即使我进口它，也没有什么区别！

我需要做什么？

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}}

现在它正在工作。。。