Angular 12：解决后卫重定向到其当前组件，而不是导航到其目的地

Question

当您登录时，应将其重定向到仪表板页面。当我们导航到仪表板时，我们将进行解决方案，以便在看到页面之前已经加载了数据。当我们直接进入仪表板的链接时，我没有遇到任何问题。数据已检索并显示在页面上。当我们从登录页面到仪表板页面导航时，Angular将返回登录页面，而无需在控制台中提供错误消息。检索数据的逻辑是在服务类中隔离的，并根据需要在组件中使用。

路由类< /strong>

（当您在 /登录页面上时，您想导航到 /仪表板 /模板Angular只会保持 /登录。直接进入 /dashboard /demplates时，数据将被加载，立即）

const routes: Routes = [
  {
    path: 'login',
    component: AuthComponent,
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'home', component: HomeComponent },
      {
        path: 'templates',
        component: TemplatesComponent,
        resolve: { templates: TemplateResolver },
      },
      { path: '**', redirectTo: 'home' },
    ],
  },
];

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

服务类

@Injectable({
  providedIn: 'root',
})
export class TemplateService {
  defaultUrl: string = [API URL];

  constructor(private http: HttpClient) {}

  getTemplates(): Observable<FullTemplateModel[]> {
    console.log('getTemplates');
    return this.http.get<FullTemplateModel[]>(this.defaultUrl);
  }
}

解决班级

@Injectable({
  providedIn: 'root',
})
export class TemplateResolver implements Resolve<FullTemplateModel[]> {
  constructor(private templateService: TemplateService) {}
  resolve(): Observable<FullTemplateModel[]> {
    console.log('resolving');
    return this.templateService.getTemplates()
  }
}