Question

我有一个懒惰的模块，具有两个组件，第一和第二。已为路由lazy/:id加载了模块。根据{{1}}的类型（API调用将返回id的类型），我们必须加载第一个或第二个组件。为此，目前在id中添加了第三个名为resolver的组件，该组件在lazyModule中为lazyModule路由加载，并为path:''进行API调用。响应将附加到URL上，并且id用于导航到this.router.navigate或first组件。

问题在于此功能已在应用程序的多个位置使用，我想在一个位置使用通用代码。使用带有空模板的组件似乎不是一个好主意。还有其他方法可以通过使用second或任何其他功能来实现。

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

Answer 1

服务将起作用-因为服务将成为注入器，并且如果您仅将服务注入根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的方法！由于解析器也是一项服务，因此您可以在任何路线中使用它

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

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

1 个答案: