Ionicでカスタムパイプを作成する

by

クリエイターとエンジニアを応援するNP-Systems@個人開発

あるページ内で利用するカスタムパイプを作成する.ngForで繰り返した要素に対して文字列をサニタイズする方法について.一つの要素だけであれば下記方法に従えばできるが,ngForで繰り返した要素に対してサニタイズする方法について.

[Angular] HTMLタグを動的にコンポーネントに埋め込む方法
ionic g pipe app-summarization/customPipe1

そうすると,そのページのモジュールページに下記のコードが追加される.もしされない場合は手動で追加する.

import { CustomPipe1Pipe } from ‘./custom-pipe1.pipe’;

@NgModule({
imports: [
**],
declarations: [**,CustomPipe1Pipe]
})

今回はcustom-pipe1.pipe.tsでサニタイズするので

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'sanitizeHTML'
})
export class CustomPipe1Pipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(code) {
    return this.sanitizer.bypassSecurityTrustHtml(code);
  }
}

使う場所はこんな感じ

    <div *ngFor="let message of messages;">
      <div [ngSwitch]="message['isAi']">
         <div *ngSwitchCase="'true'">
           <div class="media" >
             <div class="media-left">
               <a href="#" class="icon-rounded">AI</a>
             </div>
             <div class="media-body">
               <h4 class="media-heading">Sunny Date:2021/04/17</h4>
               <div [innerHTML]="message.message">{{message.message| sanitizeHTML}}</div>
             </div>
           </div>
         </div>
      </div>
    </div>


About Author: M. Shikishima

this is single-default.php
最新記事
同カテゴリの記事 ionic-angular