Angular4入門_Vol.6
参考サイト
https://www.codingforentrepreneurs.com/projects/try-angular-v4/ https://angular.io/docs/ts/latest/guide/pipes.html
Pipes & Custom Pipes
- Pipesを使ってみる。機能みるために、todayDateという変数を定義しておく。
... todayDate; // videoList = ["Item 1", "Item 2", "Item 3"]; ... ngOnInit() { this.todayDate = new Date(); }
<p> {{ title }} {{ todayDate }} </p>
すごい、これだけで、いまの日付が表示されるようになった。Date()はimportしなくていいのか。あと、ngOnInit()とconstructorの違いもよくわかってないな。
dateの表示形式を指定してみる。これがpipeの機能の一種らしい。他にも色々あるらしい!builtin pipeはかなり利用できそうな気がするな。 https://angular.io/docs/ts/latest/guide/pipes.html
<p> {{ title }} {{ todayDate | date:"MM/dd/yy" }} </p>
(多分)カスタムpipeを作成するために、src/app/utility フォルダを作成する。
pipe safe をinstallする。rootフォルダに移動して、pipe safeをinstallする。
$ ng g pipe safe
safe.pipe.tsと、safe.pipe.spec.tsが作成されると思うので、そのファイルをutilityフォルダに移動する。
さらに、app.module.tsのSafePipeのimport fromの箇所のルートをそれに合わせて修正する。
import { SafePipe } from './utility/safe.pipe';
- safe.pipe.tsを以下のようにコードを追記する。
import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; // video-list.component.tsからコピペしてくる。 @Pipe({ name: 'safe' }) export class SafePipe implements PipeTransform { constructor(private sanitizer: DomSanitizer){} // constructorを定義する。DomSanitizerをsanitizerのアノテーション transform(value: any, args?: any): any { return this.sanitizer.bypassSecurityTrustResourceUrl(value); //ここもvideo-list.componentからコピーしてくくる。引数にはvalueを設定する。 // valueは、transformの引数のvalue } }
- video-list.component.htmlで、
[src]="getEmbedUrl(item) | safe"
をpipeを使って追記する。nameの由来は、以下のコードのようだ。
@Pipe({ name: 'safe' })
ng serve
してみる。。。無事表示された!custom pipeは便利そうだな!itemのembed urlが、nullとか空の場合にerrorがでることがあるようなので、safe pipeに、if文を追記しておく。
import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; // video-list.component.tsからコピペしてくる。 @Pipe({ name: 'safe' }) export class SafePipe implements PipeTransform { constructor(private sanitizer: DomSanitizer){} // constructorを定義する。DomSanitizerをsanitizerのアノテーション transform(value: any, args?: any): any { if(value){ return this.sanitizer.bypassSecurityTrustResourceUrl(value); } //ここもvideo-list.componentからコピーしてくくる。引数にはvalueを設定する。 // valueは、transformの引数のvalue } }
- でも、
*ngIf
で、表示制限してるから、safe.pipe.tsで制御しなくても、問題なく動作はするぽいな。
まとめ
- pipeはかなりつかえそうなきがするな。builtinをできるだけ使って、builtinでできないものは、builtinを改良して、使うと良さそう。