Использование Pipe в компоненте в Ionic 3 не работает

Question

Я создал несколько повторно используемых компонентов, которые я могу использовать на других страницах, для которых нужно использовать pipe .Однако, когда я пытаюсь импортировать трубу, HTML не знает.Это возвращает мне ошибку ниже.

Ошибка: Ошибки синтаксического анализа шаблона: не удалось найти 'изображение' канала

Я знаю, что используются каналы на страницах. работает, но как я могу работать с компонентами, использующими трубы?

Чтобы объяснить это более подробно.У меня есть страница с именем account.ts , и на этой странице используется компонент <orders> , который я отображаю так:

 <orders (viewOrder)="viewAccount($event)" [orders]="orderCancelled" *ngIf="accountsHasLoaded"></orders>

И в ngModule этой страницы, которую я объявил.

@NgModule({
  declarations: [
    AccountPage,
  ],
  imports: [
    PipesModule,
    NgCalendarModule,
    ComponentsModule,
    IonicPageModule.forChild(AccountPage),
  ],
})

Это ngModule страницы счетов , который будет использовать компонент заказов .

Вот мой код ниже в моем component.ts

@Component({
  selector: 'orders',
  templateUrl: 'orders.html',
  providers: [
    ImagePipe
  ]
})

Он все еще не работает, когда я заменяю ImagePipe в провайдере на PipesModule .

и в моем html

  <img [src]="order?.client?.image?.url | image: 'original'" onError="this.src='assets/imgs/No_Image_Available.jpg';">

Изображение труб хорошо работает с страницами , но когда я пытаюсь использовать его вкомпонент он не работает.

Это мой модуль труб ниже

import { NgModule } from '@angular/core';
import { ChatDatePipe } from './chat-date/chat-date';
import { MomentPipe } from './moment/moment';
import { DatepickerFormatPipe } from './datepicker-format/datepicker-format';
import { ImagePipe } from './image/image';
@NgModule({
    declarations: [
        ChatDatePipe,
        MomentPipe,
        DatepickerFormatPipe,
        ImagePipe
    ],
    imports: [],
    exports: [
        ChatDatePipe,
        MomentPipe,
        DatepickerFormatPipe,
        ImagePipe
    ],
    providers: [
        ImagePipe
    ]
})
export class PipesModule { }

Благодарим вас за помощь.Заранее спасибо.

Answer 1

Вот как вы используете Pipe в компоненте в Ionic Framework:

Код для файла mycomponent.ts:

import { Component, Input } from '@angular/core';

import { MyPipe } from '../../pipes/mypipe/mypipe';

@Component({
  selector: 'mycomponent',
  templateUrl: 'mycomponent.component.html',
  providers: [ MyPipe ]
})
export class MyComponent {

@Input() param: string;  

  constructor( private myPipe: MyPipe) {

  }

  getFilename( value: string ) {
    return this.myPipe.transform(value);
  } 

}

И в вашем файле mycomponent.html:

<div>
    <img src="assets/imgs/svg/{{ getFilename(param) }}.svg">
</div>

Метод, который вы вызываете, находится в фигурных скобках

Answer 2

Я вижу, что вы можете попробовать это. Попробуйте это:

<img [src]="order?.client?.image?.url | ImagePipe: 'original'" onError="this.src='assets/imgs/No_Image_Available.jpg';">

Ваша труба называется ImagePipe, а не image.

, если это не работает, опубликуйте свой код ImagePipe.

Answer 3

Просто выполните следующие проверки

1.Проверьте, если вы дали желаемое имя трубы.

@Pipe({ name: 'image' })
export class ImagePipe {

}

2.Вы объявили трубу в модуль

   @NgModule({
      declarations: [
        ImagePipe,
      ],
    })

Answer 4

Вам необходимо объявить трубу в объявлении модуля:

declarations: [ ImagePipe ],
providers: [ImagePipe ]