Djangoroidの奮闘記

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

Angular4入門_Vol.19

参考サイト

https://www.codingforentrepreneurs.com/projects/try-angular-v4/ https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html https://angular.io/docs/ts/latest/guide/router.html#!#basics-router-links

Router Link & Improved Navigation

  • Router Linkを使ってみる。video-list.component.htmlに追記してみる。
<p>
  {{ title }}
</p>

<div *ngFor='let item of videoList'>
  <h1><a routerLink="/videos/{{ item.slug }}" routerLinkActive="active" >{{ item.name }}</a></h1>
  <!-- <div [innerHTML]='item.embed'></div>
  <div [innerHTML]='someItem'></div> -->
  <iframe *ngIf='item.embed' width="560" height="315" [src]="getEmbedUrl(item) | safe" frameborder="0" allowfullscreen></iframe>
  <hr>
</div>
  • hrefの代わりに、routerLinkを使うという感じになっているが、hrefとの違いは何なんだろう。。。

  • routerLinkActiveを使うことによって、よってより柔軟にlinkの切り替えができるとかそんな感じなのかな。。。。

  • とりあえず、動画講義では、hrefになっていた箇所を片っ端から、routerLinkに変えていっていた。

Improve Styling

  • interfaceだけを修正するだけなので、割愛

ngClass

  • ngClassを使ってみる。ngClassは、たぶん、classをangularで双方向データバインディングできるようなモジュールだと思われる。
<p>
  {{ title }}
</p>
<div *ngFor='let item of videoList; let i = index' [ngClass]="{'row': (i+1)%3 == 0}">
  <div class="col-sm-4">
    <div class="thumbnail">
        <a routerLink="/videos/{{ item.slug }}" routerLinkActive="active" *ngIf='item.image'><img [src]='item.image' alt="{{ item.name }} image"></a>
        <div class="caption">
          <h3><a routerLink="/videos/{{ item.slug }}" routerLinkActive="active" >{{ item.name }}</a></h3>
          <p>...</p>
          <p><a routerLink="/videos/{{ item.slug }}" routerLinkActive="active" class="btn btn-primary" role="button">View</a></p>
        </div>
      </div>
  </div>
</div>