99. A-tag-not-highly-recommended

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

アプリ開発をイメージさせる写真
あるページ内で利用するカスタムパイプを作成する.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>
データサイエンティスト
絹田 真也
千葉県市川市在住。大手通信キャリアのデータサイエンティスト。 個人で活動する場所が欲しくてブログをしています。 NP & Companyという個人事務所でITサービス企画開発も細々しています。 通信キャリアでデータサイエンティスト←古河電工でデータエンジニアリング←慶應大学←慶應高校
twitter-timeline