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>