Angular2 ひな型 ver.0.0.3的原型为中文进行重述如下：Angular2 模板版本为0.0.3

2 年 ago
科, 雅
5 minutes

Angular2 初始版 ver.0.0.3

简介

基于 Angular2 模板版本0.0.2，进行以下更改：
– 添加认证服务（部分虚拟）
– 添加登录页面（虚拟）
– 添加个人资料页面（虚拟）
– 添加修改密码页面（虚拟）

一步。

    認証用のサービス追加
import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/delay';

@Injectable()
export class AuthService {
  isLoggedIn: boolean = false;

  // store the URL so we can redirect after logging in
  redirectUrl: string;

  login(email:string, password: string): Observable<boolean> {
    return Observable.of(true).delay(1000).do(val => this.isLoggedIn = true);
  }

  logout(): void {
    this.isLoggedIn = false;
  }
}

在公式网站的示例基础上做了几乎没有改动的修改（在login方法中添加了email和password参数）。

import { Injectable }       from '@angular/core';
import {
  CanActivate, Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
}                           from '@angular/router';
import { AuthService }      from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    let url: string = state.url;

    return this.checkLogin(url);
  }

  checkLogin(url: string): boolean {
    if (this.authService.isLoggedIn) { return true; }

    // Store the attempted URL for redirecting
    this.authService.redirectUrl = url;

    // Navigate to the login page with extras
    this.router.navigate(['/login']);
    return false;
  }
}

只需要一个选项,请将以下内容用中文进行释义:
※原封不动地使用官方网站的样本

第二步

    ログイン画面の追加
import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent }       from './login.component';

const loginRoutes: Routes = [
  { path: 'login', component: LoginComponent }
];

@NgModule({
  imports: [ RouterModule.forChild(loginRoutes) ],
  exports: [ RouterModule ]
})
export class LoginRoutingModule {}

import { NgModule }             from '@angular/core';
import { FormsModule }          from '@angular/forms';
import { LoginComponent }       from './login.component';
import { LoginRoutingModule }   from './login-routing.module';
import { AuthGuard }            from '../services/auth-guard.service';
import { AuthService }          from '../services/auth.service';

@NgModule({
  imports: [ LoginRoutingModule, FormsModule ],
  declarations: [ LoginComponent ],
  providers: [ AuthGuard, AuthService ]
})
export class LoginModule {}

在导入中加载FormsModule、AuthGuard和AuthService。
将AuthGuard和AuthService添加到providers中。

import { Component,Input }  from '@angular/core';
import { Router }           from '@angular/router';
import { AuthService }      from '../services/auth.service';
import { Observable }       from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  moduleId:     module.id,
  templateUrl:  './login.component.html',
  styleUrls:    ['./login.component.css'] 
 })
export class LoginComponent {
  email: string = '';
  password: string = '';

  /**
   * 初期処理
   */
  constructor(public authService: AuthService, public router: Router) {}

  /**
   * ログイン処理
   */
  login() {

    this.authService.login(this.email, this.password).subscribe(() => {

      if (this.authService.isLoggedIn) {
        let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/home';
        this.router.navigate([redirect]);
      } else {
        console.log('login error !!');
      }
    });
  }

  /**
   * ログアウト処理
   */
  logout() {
    this.authService.logout();
  }

  /**
   * 入力チェック処理
   */
  checkInputValue():boolean {
    var disabled = ( !this.email || !this.password );
    return disabled;
  }
}

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">ログイン</h3>
  </div>
  <div class="panel-body">
    <form class="form-signin">
      <input name="email" type="email" [(ngModel)]="email" class="form-control" placeholder="メールアドレス" required autofocus>
      <input name="password" type="password"  [(ngModel)]="password" class="form-control" placeholder="パスワード" required>
      <button class="btn btn-lg btn-primary btn-block" (click)="login()" [disabled]="checkInputValue()">
        <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> ログイン
      </button>
    </form>
  </div>
</div>

.panel {
  max-width: 380px;
  margin: auto;
  margin-top: 100px;
}

input {
  margin-top: 10px; 
}

button {
  margin-top: 30px; 
}

第三步

    • プロフィール画面の追加

 

    パスワード変更画面の追加
import { NgModule }               from '@angular/core';
import { RouterModule, Routes }   from '@angular/router';
import { UserInfoComponent }      from './user-info.component';
import { UserPasswordComponent }  from './user-password.component';
import { AuthGuard }              from '../services/auth-guard.service';

const routes: Routes = [
  { 
    path: 'user',
    children: [
      {
        path: 'info',
        component: UserInfoComponent,
        canActivateChild: [ AuthGuard ], 
      },
      {
        path: 'password',
        component: UserPasswordComponent,
        canActivateChild: [ AuthGuard ], 
      },
    ]
  },
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ]
})
export class UserRoutingModule { }

import { NgModule }               from '@angular/core';
import { FormsModule }            from '@angular/forms';
import { UserInfoComponent }      from './user-info.component';
import { UserPasswordComponent }  from './user-password.component';
import { UserRoutingModule }      from './user-routing.module';

@NgModule({
  imports: [
    UserRoutingModule,
    FormsModule
  ],
  declarations: [
    UserInfoComponent,
    UserPasswordComponent
  ]
})
export class UserModule {}

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

@Component({
  moduleId: module.id,
  templateUrl: 'user-info.component.html'
})
export class UserInfoComponent { }

<div class="jumbotron">
  <h2>User Info</h2>
</div>

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

@Component({
  moduleId: module.id,
  templateUrl: 'user-password.component.html'
})
export class UserPasswordComponent { }

<div class="jumbotron">
  <h2>User Password</h2>
</div>

第四步

    ホーム画面に認証チェック処理を追加
const routes: Routes = [
  { 
    path: 'home',
    component: HomeComponent,
    canActivate: [ AuthGuard ], 
  },
];

※ 添加 canActivate: [ AuthGuard ] (通过添加此代码，将进行认证检查处理)

第五步

    ナビゲーションの一部を認証済の場合のみ表示するように修正
    <div id="navbar" class="collapse navbar-collapse">
      <ul *ngIf="authService.isLoggedIn" class="nav navbar-nav">
      </ul>
      <ul *ngIf="authService.isLoggedIn" class="nav navbar-nav navbar-right">
        <li class="dropdown">

添加条件 *ngIf=”authService.isLoggedIn”，仅在用户已登录时显示。

第六步骤

    ログアウトの遷移先をログイン画面に変更
           <li>
              <a routerLink="/user/info">
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span> プロフィール
              </a>
            </li>
            <li>
              <a routerLink="/user/password">
                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span> パスワード変更
              </a>
            </li>
            <li>
              <a routerLink="/login" (click)="authService.logout()" >
                <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> ログアウト
              </a>
            </li>

将”href=’#'” 替换为 “routerLink=’/login'”
将其他指向个人资料页面和修改密码页面的 “href=’#'” 也删除

第七步

    追加機能・画面の読込処理を追加
import { NgModule }               from '@angular/core';
import { BrowserModule }          from '@angular/platform-browser';
import { CommonModule }           from '@angular/common';
import { FormsModule }            from '@angular/forms';
import { Router }                 from '@angular/router';

import { AppComponent }           from './app.component';
import { AppRoutingModule }       from './app-routing.module';
import { PageNotFoundComponent }  from './not-found.component';
import { HomeModule }             from './home/home.module';
import { LoginModule }            from './login/login.module';
import { UserModule }             from './user/user.module';

@NgModule({
  imports: [ 
    BrowserModule,
    CommonModule,
    FormsModule,
    HomeModule,
    LoginModule,
    UserModule,
    AppRoutingModule
   ],
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule {
  constructor(router: Router) {
    console.log('Routes: ', JSON.stringify(router.config, undefined, 2));
  }
}

※ 添加LoginModule和UserModule（在AppRoutingModule之前）

在最后

    • 初期表示時にログイン画面が表示されることを確認

 

    • ログイン後にナビゲーション部にログインユーザー用のメニューが表示されることを確認

 

    • プロフィール画面に遷移されることを確認

 

    • パスワード変更画面に遷移されることを確認

 

    ログアウト後にログイン画面に遷移されることを確認

可以参考

0.0.3版本源代码

版本0.0.1 说明页面
版本0.0.2 说明页面

上述所述

✖
广告
将在 10 秒后关闭
bannerAds