有条件地重定向而不使用组件 Angular

Question

我有一个惰性模块，它有两个组件，第一个和第二个。为路由 lazy/:id 加载模块。根据id 的类型（API 调用将返回id 的类型），我们必须加载第一个或第二个组件。为了实现这一点，目前在lazyModule 中添加了名为resolver 的第三个组件，它为lazyModule 中的path:'' 路由加载，并对id 进行API 调用。响应附加到 url，this.router.navigate 用于导航到 first 或 second 组件。

问题是这个功能在应用程序的多个地方都被使用了，我想在一个地方使用一个公共代码。使用带有空模板的组件似乎不是一个好主意。有没有其他方法可以通过使用guard/service/resolver 或任何其他功能来实现它。

我在 stackblitz 上对此做了一个最小的复制：https://stackblitz.com/edit/angular-8ylxq8?

Answer 1

Service 将起作用 - 因为 service 将是一个注入器，如果您只是在 root module 中注入您的服务，您可以在任何模块中使用它

这样

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

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor() { }

}

您不需要在任何 module provider 数组中添加服务 - provideIn 将负责在您的根模块中注入

最后 - 您正在考虑在路由时在许多地方使用它，因此您可以在路由发生时调用此服务并将navigate 调用到特定的components - 在路由之前访问某些服务您可以使用route resolver

@Injectable()
class TeamResolver implements Resolve<Team> {
  constructor(private backend: Backend) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    return this.backend.fetchTeam(route.params.id);
  }
}

您可以调用您的服务的this.backend.fetchTem() 方法，这样您就可以删除您的组件并映射您的resolver 服务

{
    path: 'team/:id',
    component: TeamCmp,
    resolve: {
      team: TeamResolver
    }
  }

在您的路由中访问您的resolver 的方法！由于解析器也是一项服务，因此您可以在任何路线中使用它

希望这会有所帮助 - 编码愉快！！