Angular 入門してみる 7

今回は前回行ったルーティングを用いて新たにDashboard ページに遷移するための実装を行う。
今回はいきなり実装。

関連記事
環境
実装

Angularのルーティング設定（基礎編） - Qiita

環境

Angular CLI: 8.0.1
Node: 12.3.1

実装

DashboardComponentを作成

中身なんもないけどとりあえず作成。templateUrl は，与えられたurlのhtmlファイルを参照する。htmlファイルについては後ほど実装。

import { Component } from '@angular/core';
@Component({
  selector: 'my-dashboard',
  templateUrl: './dashboard.component.html'
})

export class DashboardComponent {
  
}

リダイレクト

今回はトップページにリンクした際，このDashboardComponent にリダイレクトするよう実装を行う。
app.module.ts の forRoot の属性に以下を追加する。

      {
        path: '',
        redirectTo: '/dashboard',
        pathMatch: 'full'
      }

path にリダイレクト元のページ，redirectTo にリダイレクト先のページを，pathMatchにはfullを設定する。pathMatch: 'full' の場合はパスが完全一致した場合遷移する。
パスの照合方法（prefix：前方一致、full：完全一致、デフォルトはprefix）

URLとリンクでコンポーネント表示を切り替える「Angular 2」のルーター (1/3)：CodeZine（コードジン）

DashboardComponent をModule に加える

いつもの流れ。先程のリダイレクトを含めた Routing の追加もココで行っておく。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {RouterModule} from '@angular/router';

import {AppComponent} from './app.component';
import { MembersComponent }  from './members.component';
import { MemberDetailComponent } from './member-detail.component';
import { DashboardComponent} from './dashboard.component';  // 追加
import {MemberService} from './member.service';

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    // routerの設定
    RouterModule.forRoot([
      {
        path: 'members',  // pathにmemberを指定，
        component: MembersComponent  // MembersComponentを指定
      },
      {
        path: 'dashboard', // 追加
        component: DashboardComponent // 追加
      },
      {
        path: '', // 追加
        redirectTo: '/dashboard',  // 追加
        pathMatch: 'full' // 追加
      }
    ])
  ],
  declarations: [
    AppComponent,
    MembersComponent,
    MemberDetailComponent,
    DashboardComponent, // 追加
  ],
  bootstrap:    [
    AppComponent
  ],
  providers: [
    MemberService
  ]
})
export class AppModule { }

実行。
f:id:noinoi_monstS4l:20190609172255p:plain

DashboardComponent に機能を追加

今のままでは味気ないのでMEMBERSの上位4人を表示させるよう実装。
まず，社員一覧ページ同様，member.service を用いて MEMBERS を受け取る。
流れの復習
1. OnInit, MemberService をそれぞれimport
2. OnInit を DashboardComponent に継承
3. コンストラクタでmemberService を注入
4. 強制された ngOnInit メソッドにmemberService を用いて上位4名のmembers を取得

import { Component, OnInit } from '@angular/core';
import {Member} from './member';
import {MemberService} from './member.service';
@Component({
  selector: 'my-dashboard',
  templateUrl: './dashboard.component.html'
})

export class DashboardComponent implements OnInit {

  members: Member[];

  constructor(private memberService: MemberService) {
  }

  ngOnInit(): void {
    this.memberService.getMembers()
      .then(members => this.members = members.slice(1, 5));
  }
}

dashboard.component.html を作成し，取得したmembersを表示。

<h1>ダッシュボード</h1>
<ul class="grid grid-pad">
  <li *ngFor="let member of members" class="col-l-4">
    <div class="module member">
      <h4>{{member.name}}</h4>
    </div>
  </li>
</ul>