Uncaught Error: Ошибки синтаксического анализа шаблона: не удалось найти канал 'translate' - ionic 3 с angular 6

Question

Я новичок, так что будьте терпеливы со мной, пожалуйста !!

Не могу понять, что нужно сделать, чтобы это сработало! Искал, но ответ не помог мне.

Трубы работают на моей странице регистрации ресторана, но не могут использовать ее в моем компоненте restaurant-info (используется в 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 - Где я получаю сообщение об ошибке «Не найден канал» ...

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

...

У меня нет файла "import {TranslateService}" в файле restaurant-info.ts, потому что мне нужно использовать только перевод в html-файле. Даже если я его импортирую, это не имеет значения!

Что мне нужно сделать?

Answer 1

Одним из решений (возможно, не самым элегантным) является использование метода get () из TranslateService.

В ts файле создайте функцию для tanslate:

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

Теперь используйте функцию translateKey в представлении HTML-шаблона:

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

Теперь работает ...

Answer 2

Попробуйте импортировать TranslateModule в RestaurantModule