我喜欢resolvers 的想法.

您可以这样说:
- 对于给定的路径,您希望首先加载一些数据
- 您可以拥有一个没有可观察的非常简单的组件(从中检索数据this.route.snapshot.data)

解析器很有意义.

但是:
- 在收到实际响应之前,您不会更改URL并显示您请求的组件.因此,您不能(简单地)通过呈现组件并尽可能多地显示用户来显示用户正在发生的事情(就像建议使用PWA的shell应用程序一样).这意味着当连接不良时,您的用户可能只需要等待很长时间没有视觉指示正在发生的事情
- 如果您在使用参数的路线上使用解析器,让我们以其为例users/1,它将正常工作第一次.但是如果你去users/2,除非你开始使用另一个observable,否则什么都不会发生:this.route.data.subscribe()

所以感觉解析器可能有助于检索一些数据但在实践中我不会使用它们以防万一网络速度慢,特别是对于带有参数的路由.

我在这里错过了什么吗？有没有办法将它们与那些真正的约束一起使用？

我在路由上实现解析器时遇到问题,因为InitialDataResolver在我的路由模块上包含它之前没有问题.

页面,routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FrontComponent } from '../layouts/front/front.component';
import { HomeComponent } from './home/home.component';
import { DocsComponent } from './docs/docs.component';
import { InitialDataResolver } from './../shared/resolvers/initial-data.resolver';

const routes: Routes = [
  {
    path: '',
    component: FrontComponent,
    children: [
      { path: '', component: HomeComponent },
      { path: 'docs', component: DocsComponent }
    ],
    resolve: {
      init: InitialDataResolver
    },
  }
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ …

我对角度真的很陌生，这是我创建的第一个项目。我在这里需要做的是创建一个 add-editClient 组件，并使用 Angular 解析方法从后端（spring-boot）获取数据，对于数据库，我使用 MYSQL 和 DBeaver。我用有角的材料设计我的界面。

我还在应用程序路由模块中添加了解析数据。无论我尝试从@angular/router安装resolve多少次，它仍然被弃用。

请参阅下面的附图。

addEditClient.ts 文件 app-routing.module.ts

请告诉我是否有任何方法可以解决这个问题。非常感谢任何建议:)

我想知道在Angular 5中加载数据的最佳方法是什么.当然,我们希望保持组件哑;;现在,我正在使用一个解析器,Angular在特定路径中调用解析器.基本上,数据在组件初始化之前加载,因此我可以向用户显示加载器动画.

例如.

AResolver.resolver.ts

@Injectable()
export class AResolver implements Resolve<any> {
    constructor(private readonly aService: AService) {}

    resolve(route: ActivatedRouteSnapshot) {
        return this.aService.find(route.paramMap.get('id'));
    }
}

M.module.ts

export const MRoutes: Routes = [
    {
        path: 'route-x',
        component: AComponent,
        resolve: AResolver
    }
];

AComponent.component.ts

@Component({
    selector: 'a-super-fancy-name',
})
export class AComponent {

    constructor(private readonly route: ActivatedRoute) {}

}

好吧,到目前为止一切顺利,但是:

1. 如果我有依赖的解析器怎么办？那么,要解决B我们需要一个来自A的id？我应该使用旋转变压器包装吗？因此,我做了类似的事情:

例

@Injectable()
export class ABResolver implements Resolve<any> {

    constructor(private readonly aService: AService, private readonly bService: BService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        return this.aService.resolve(route, …

我有一组Angular路由,带有实体列表,有两条子路由,用于创建这样的实体和编辑现有实体.实体列表resolver附加了它以在显示组件之前预取组件的数据.这些路由可以总结如下,进一步了解如何在代码中描述这些路由.

• 指数: /items
• 创建: /items/create
• 编辑: /items/:itemId/edit

但是,如果我在/items/create,并成功创建一个项目,导航"返回" /items或任何编辑路线,甚至返回到/将不会导致我的解析器获取像我期望的更新数据.尽管将runGuardsAndResolvers属性设置为"始终".我的理解是这个属性应该能够实现我正在寻找的功能.

为什么会这样,我怎样才能启用我正在寻找的功能,而不需要在我的组件中订阅路由器事件和复制逻辑.

路线

const itemRoutes: Routes = [
    {
        path: '', // nb: this is a lazily loaded module that is itself a child of a parent, the _actual_ path for this is `/items`. 
        runGuardsAndResolvers: 'always',
        component: ItemsComponent,
        data: {
            breadcrumb: 'Items'
        },
        resolve: {
            items: ItemsResolver
        },
        children: [
            {
                path: 'create',
                component: CreateItemComponent,
                data: { …

有没有办法在加载延迟加载模块之前添加解析器？我试图添加resolve到路由配置，但它没有被触发，也没有在网上找到任何有用的东西。任何帮助，将不胜感激

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// services
import {SecondResolverService} from "./second.resolver.service";

const routes: Routes = [
  { path: 'first' , loadChildren: './first/first.module#FirstModule' },
  { path: 'second', loadChildren: './second/second.module#SecondModule' ,resolve : {data : SecondResolverService}}
];

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

我试图在导航到子级路由之前解析数据，因为我必须在儿童警卫队中使用该数据。问题是父级解析器，在解雇了儿童看守后解析数据。解析器需要很长时间才能解析数据

// app.module.ts
const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  {
    path: '',
    component: SiteLayoutComponent,
    children: [
      { path: '', redirectTo: 'warehouse', pathMatch: 'full' },
      {
        path: 'warehouse',
        loadChildren: './warehouse/warehouse.module#WarehouseModule'
        // loadChildren: () => WarehouseModule
      }
    ],
    canActivate: [AuthGuard],
    resolve: {
      Site: SiteResolver // should be resolved before the guard is invoked.
    }
  },
  { path: '**', component: PageNotFoundComponent }
];

// warehouse.module.ts
const appRoutes: Routes = [

    { path: '', redirectTo: 'cash', pathMatch: 'full' }, …

我使用 AngularResolver在显示路线之前从服务器预取数据，因此页面不会加载为空，我们对此原则表示同意。

我现在的问题是如何使用相同的方法Resolver在没有路由的情况下从服务器预取数据？为了更多地解释我的问题，这里是我的屏幕草图：

在我的应用程序的 HeadreComponent 上，我需要进行一些 api 调用来获取，person.firstName但person.lastName标头没有定义的路由，因为它应该显示在第一页上 (http:localhost:4200\home)。所以我无法在路由配置中使用常规语法来调用解析器，如下所示：

{path: 'home', component: HomeComponent, resolve: {personInfos: PersonInfoResolver}}

我可能会错过一些我正在开始 Angular 开发的东西，所以请友善：D

基本上我有一个通知组件，可以在单击标题中的图标时显示通知。当我们单击标题上的图标时，它会打开一个弹出窗口并显示通知列表。单击任何一个通知时，它会将用户路由到该特定通知的组件，就像单击 notification 一样，它将用户带到该路由：profile/guest/{guestid}/alerts/{alertid}。但是，当我们单击上述路线中的另一个通知时，它会更改路线参数，但不会重新加载新警报的数据，而仅显示旧路线的数据。

注意：显示的数据是从路由解析中获取的。由于组件已经加载，当我们单击另一个通知时，它不会调用 ngOnInit 或构造函数。但是当我们刷新页面时，它会根据更新的路线显示正确的数据。

我尝试实现不同的路由器配置解决方案来重新加载解析数据。例如 runGuardsAndResolvers 以及 onSameUrlNavigation。

我还尝试在其他角度组件生命周期挂钩（例如 ngAfterViewInit 或 ngAfterViewChecked）中调用设置数据的函数。

我又尝试了几种解决方案，但都没有用。

 Notification.component.ts :-(inside header component in shared module)
/**
   * * Callback when user clicks on visit button in notification modal
   * @param notification : notification 
   */
  navigateToGuestOrCustomer(notification: notification) {
    let routePath =
      notification.model == ALERT_MODEL.GUEST ? "guest" : "customers";
    let routeParamId = notification.detail_id;
    let alertId = notification.id;
    this.router.navigate([`/profile/${routePath}/${routeParamId}/alerts/${alertId}`]);
  }


edit-alert.component.ts(inside profile module in guest component>alert component)

  ngOnInit() {
    this.fetchRouteData();
    this.setGuestId();
    this.setGuestName();
  }

  /**
   * * …

我有这个路由器解析器，用于从Google Firestore检索数据。我正在尝试使用解析器来预先获取数据。当我将调试器放置在resolve函数上时，它将向我显示从服务器检索的数据。但是它永远不会从resolve（）方法返回。谁能帮我一下。

路由模块

const routes: Routes = [
    { path: '', component: HomeComponent},
    { path: 'projects', component: ProjectsComponent, resolve: {projectData: ProjectResolver} },
    { path: 'about', component: AboutComponent}
];

应用模块

  providers: [
    ProjectService,
    ProjectResolver
  ],

解析器服务

import { Observable } from 'rxjs';
import { ActivatedRouteSnapshot, RouterStateSnapshot, Resolve } from '@angular/router';
import { Injectable } from '@angular/core';
import { ProjectService } from './project.service';
import { map } from "rxjs/operators";
import { Project } from './project.model';

@Injectable()
export class ProjectResolver implements Resolve<Project[]> { …