悩めるangular2使い【CSSスタイリング】 - この素晴らしきフロントエンドに祝福を

angular2を使っていて、
とても悩ましく思うことが多々あります。

そのうちの１つは
実現可能な実装方法が複数ある中で
どの方法を選択するのかという悩みです。

これはプログラミングする上では当たり前の悩みですし、
どの方法を選択するかは腕の見せ所ではあるのですが、
angular2に関してはまだ判断基準が曖昧でして。

ここでズバリこれがベストプラクティスだ！
と示すことができればかっこいいんですが
現状、結論のでないまま悶々とした気持ちで
悶々とさせる記事を投稿しやがります。

例えば、
コンポーネント内でh1タグの背景色を赤色にする
という初歩的な実装があったとします。

それを実現するにあたり、
私が思いつく限りでは6つの実装方法があるかと
思います。

ソースを見た方が早いかと思うので
こちらをご覧ください。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `

  <!-- ①定石通りにやる場合 -->
  <h1 style="background-color:#ff6666;">
    {{title}}
  </h1>

  <!-- ②カプセルCSSの場合 -->
  <h1 class="sample">
    {{title}}
  </h1>

  <!-- ③プロパティバインドの場合 -->
  <h1 [style.backgroundColor]="'#ff6666'">
    {{title}}
  </h1>

  <!-- ④ngStyleを使う場合 -->
  <h1 [ngStyle]="{'background-color':'#ff6666'}">
    {{title}}
  </h1>

  <!-- ⑤ngClassを使う場合 -->
  <h1 [ngClass]="{sample:true}">
    {{title}}
  </h1>

  <!-- ⑥カスタムディレクティブを使う場合 -->
  <h1 sample>
    {{title}}
  </h1>
  `,
  styles: [`
  .sample{
    background-color:#ff6666;
  }
  `]
})
export class AppComponent {
  title = 'app works!';
}

import { Directive,ElementRef,Renderer } from '@angular/core';
@Directive({
  selector:'[sample]'
})
export class SampleDirective{
  constructor(private el:ElementRef,private renderer:Renderer){
    this.renderer.setElementStyle(this.el.nativeElement,'background-color','#ff6666');
  }
}

画面はこのように表示されます。

f:id:zetton110:20161014021126p:plain