[web-app] ng-alain模版工程初始化

web-app/src/app/routes/exception/exception-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ExceptionComponent } from './exception.component';
+import { ExceptionTriggerComponent } from './trigger.component';
+
+const routes: Routes = [
+  { path: '403', component: ExceptionComponent, data: { type: 403 } },
+  { path: '404', component: ExceptionComponent, data: { type: 404 } },
+  { path: '500', component: ExceptionComponent, data: { type: 500 } },
+  { path: 'trigger', component: ExceptionTriggerComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ExceptionRoutingModule {}

web-app/src/app/routes/exception/exception.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ExceptionType } from '@delon/abc/exception';
+
+@Component({
+  selector: 'app-exception',
+  template: ` <exception [type]="type" style="min-height: 500px; height: 80%;"> </exception> `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ExceptionComponent {
+  get type(): ExceptionType {
+    return this.route.snapshot.data.type;
+  }
+
+  constructor(private route: ActivatedRoute) {}
+}

web-app/src/app/routes/exception/exception.module.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ExceptionModule as DelonExceptionModule } from '@delon/abc/exception';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzCardModule } from 'ng-zorro-antd/card';
+
+import { ExceptionRoutingModule } from './exception-routing.module';
+import { ExceptionComponent } from './exception.component';
+import { ExceptionTriggerComponent } from './trigger.component';
+
+@NgModule({
+  imports: [CommonModule, DelonExceptionModule, NzButtonModule, NzCardModule, ExceptionRoutingModule],
+  declarations: [ExceptionComponent, ExceptionTriggerComponent]
+})
+export class ExceptionModule {}

web-app/src/app/routes/exception/trigger.component.ts

@@ -0,0 +1,35 @@
+import { Component, Inject } from '@angular/core';
+import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
+import { _HttpClient } from '@delon/theme';
+
+@Component({
+  selector: 'exception-trigger',
+  template: `
+    <div class="pt-lg">
+      <nz-card>
+        <button *ngFor="let t of types" (click)="go(t)" nz-button nzDanger>触发{{ t }}</button>
+        <button nz-button nzType="link" (click)="refresh()">触发刷新Token</button>
+      </nz-card>
+    </div>
+  `
+})
+export class ExceptionTriggerComponent {
+  types = [401, 403, 404, 500];
+
+  constructor(private http: _HttpClient, @Inject(DA_SERVICE_TOKEN) private tokenService: ITokenService) {}
+
+  go(type: number): void {
+    this.http.get(`/api/${type}`).subscribe();
+  }
+
+  refresh(): void {
+    this.tokenService.set({ token: 'invalid-token' });
+    // 必须提供一个后端地址，无法通过 Mock 来模拟
+    this.http.post(`https://localhost:5001/auth`).subscribe(
+      res => console.warn('成功', res),
+      err => {
+        console.log('最后结果失败', err);
+      }
+    );
+  }
+}