トッカンソフトウェア

Angular 2 サービス

今回は処理ロジックをサービスとして外に出してしまいます。

前回の作成したものをベースにするので、まずは前回分を作成し、 その後に今回分を追加、上書きを行って下さい。


ソースファイル

app\login.service.ts

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

@Injectable()
export class LoginService {
    isLogin(id: string, pass: string): boolean {
        if (id == pass) {
            return true;
        } else {
            return false;
        }
    }
}


			
クラスの頭に@Injectable()を付けて下さい。

app\login.component.ts

				

import { Component } from '@angular/core';
import { Router } from '@angular/router'
import { Login } from './login';
import { LoginService } from './login.service';

@Component({
    moduleId: module.id,
    templateUrl: 'login.component.html',
    providers: [LoginService]
})
export class LoginComponent {
    model = new Login('', '');
    constructor(private router: Router, private loginService: LoginService) { }

    onSubmit() {
        if (this.loginService.isLogin(this.model.loginId, this.model.password)) {
            this.router.navigate(['menu']);
        } else {
            this.model.message = "ログインに失敗しました";
        }
    }
}


			
ログイン画面のコンポーネントになります。認証処理はサービスを呼び出しています。

実行イメージ






ページのトップへ戻る
ェア All Rights Reserved.