Question

在一个有角度的5应用程序中，有一个路径保护，可以检查API是否存在对象：

// guard.ts摘录

sigaction

// route.ts摘录

canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
  return this.clientService.get(next.params.id).switchMap( data => {
    return Observable.of(true);
  })
  .catch( err => Observable.of(false))

}

这很完美，但我想知道是否有办法将从我的服务检索到的数据传递到下一个路由/组件（ClientDetail），所以我不再需要再次调用该服务。我试着添加

{ path: ':id', canActivate: [ ClientDetailGuard ], component: ClientDetail }

在返回Observable（true）之前，但在组件中，ActivatedRoute的数据没有设置此值。或者我应该使用像Resolve这样的东西吗？

我知道我可以使用某个状态容器或共享服务来存储/检索数据，但我不想在此时执行此操作，只要应用程序不复杂。

Answer 1

您似乎低估了服务的力量。服务是在组件之间保存/存储数据或状态的最佳方式。您可以从任何组件设置数据，从任何组件中提取数据。您不必担心将数据放入下一条路线，而是转到下一条路线并在ngOnInit上订阅您的数据，并获得所需的一切。这是一个简单的例子。

服务示例

import { Injectable } from '@angular/core';
import { BehaviorSubject, Subscription } from 'rxjs';

@Injectable()
export class AppService {

    alertData = new BehaviorSubject({
        type: '',
        message: '',
        timer: 0,
        showing: false
    });

    constructor() {}

    setAlertData(data: AlertModel) {
        this.alertData.next(data);
    }
}

使用服务的示例

this.subscription$.push(this._as.alertData.subscribe((data: AlertModel) => {
    this.alertData = data;
    if (data.showing) {
        this.alertIsShowing = true;
    }
    else {
        this.alertIsShowing = false;
    }
}));

Answer 2

我可以使用解析器代替守卫

来做到这一点

// route.ts

{ path: ':id', resolve: { client: ClientDetailResolver }, component: ClientDetail }

// resolver.ts @Injectable（）导出类ClientDetailResolver实现Resolve {

  constructor(private clientService: ClientService, private router: Router, public location: Location) {

  }

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    return this.clientService.get(route.params.id)
    .catch( err => {
      //handle error
      const path = this.location.path();
      this.router.navigate(["error", err.status], { skipLocationChange: true })
      .then( () => {
        this.location.replaceState(path);
      });

      return Observable.empty();
    })
  }
}

Angular 5：将检索到的数据转发到下一个组件/路由

2 个答案: