Pipe 재사용 및 Shared Module 사용법

1. Module로 만들기

2. Module에 export추가하기

3. 원하는 여러 모듈에 import

---

isDayTime 이라는 boolean 타입의 값을 한글로 변환해 주는 파이프입니다.

true면 주간으로

false면 야간으로 변경합니다.

 

최종 형태:

// day-time.pipe.module.ts

import { NgModule } from "@angular/core";
import { DayTimePipe } from "./day-time.pipe";

@NgModule({
    imports: [],
    declarations: [DayTimePipe],
    exports: [DayTimePipe]
})
export class DayTimePipeModule { }

// day-time.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'dayTime'
})
export class DayTimePipe implements PipeTransform {

  transform(value: boolean): string {
    return !!value ? '주간' : '야간';
  }

}

사용 예:

<!-- 어디가.html -->
<ion-item>
  <ion-label>근무 시간 선택: {{recoderTemplate.info.isDayTime | dayTime}}점검</ion-label>
  <ion-toggle color="success" [(ngModel)]="recoderTemplate.info.isDayTime"></ion-toggle>
</ion-item>

---

주의사항: 'day-time.pipe.module.ts'가 아래 코드와 같이 다른 모듈이 imports 되어있다면 애러가 발생합니다.

그러니 꼭 다른 imports가 없도록 만들어야합니다.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { TimeReadComponent } from './time-read.component';

const routes: Routes = [
  {
    path: '',
    component: DayTimePipe
  }
];

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    FormsModule,
    RouterModule.forChild(routes)
  ],
  declarations: [DayTimePipe],
  exports: [DayTimePipe]
})
export class DayTimePipeModule { }