Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

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を改良して、使うと良さそう。