angular - http-request 完全执行后点击 Angular 7 路由

Question

我有一个条目列表，当我单击一个列表时，我会进入该项目的更详细视图。现在这个视图通过 http-Request 加载（这比从页面到页面的路由要长一点）。所以假设我有以下代码：

对于目标页面：

 projectNumber: string = '';

  ngOnInit() {
  }

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private logger: LoggerService,
    private projectReceiverService: ProjectReceiverService
  ) {
    this.initProjectDataFromProjectNumber(this.route.snapshot.paramMap.get('projectNum'));
  }

  initProjectDataFromProjectNumber(projectNumber: string) {
    let project = this.projectReceiverService.getProjectByNumber(projectNumber); 
    this.projectNumber = projectNumber; //getProjectNumber => results in error
  }

对于服务：

 getProjectByNumber(projectNumber: string): Project {
 let project: Project; 
 this.http.get(httpBaseUrl + "/project/getProject/" + projectNumber, httpOptions).subscribe((data) => {
  this.logger.info("Received data, processing...");
  project = data['projectDto'];
},
(error) => {
  this.logger.error("Error when receiving project.");
  this.logger.error(error.message);
});;
 return project;
}

对于上一页（我单击该项目）：

 projectClicked(projectNumber: string) {
    this.routeTo('projects/' + projectNumber);
  }

现在，如果我能在 http-request 完全成功后以某种方式设法路由，那就太好了（因为我可以在路由时直接传递项目对象，而且我不会在显示一些可能还没有的数据时遇到困难在详细页面上加载）。我怎么能那样做？我考虑过在点击某些内容之前将其加载到前一侧，但是之前加载每个项目的所有详细信息将是一个超载的地狱。

标签： angularhttprequestangular-routingangular-http

Answer 1

您可以使用路由解析器相对轻松地完成此操作。

它是这样的。在你的路由配置中，你给你的路由路径、组件和一个resolver.

const routes = [{
  path: 'projects/:projectNumber',
  component: DestinationComponent,
  resolve: {
    project: ProjectResolver
  },
}];

现在您必须将此路由放入模块中，并提供您提到的解析器。比如像这样：

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

但是这个 ProjectResolver 是什么？它只是一个实现 Angular 的 Resolve 接口的可注入类，它在它的resolve()方法上以数据、Promise 或 Observable 的形式返回数据。看起来像这样：

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
// You will also need your service
import { ProjectService } from './project.service';

@Injectable()
export class ProjectResolver implements Resolve {
  // Inject it with where the data comes from
  constructor(private projectService: ProjectService) {}

  // Now implement the resolve interface. Angular will give you the route,
  // from which you can read the parameter.
  resolve(route: ActivatedRouteSnapshot): Observable<Project> {
    const projectNumber = route.snapshot.params['projectNumber'];
    return this.projectService.getProjectByNumber(projectNumber);
  }
}

现在，我们必须修复一点你的服务——http 方法通常是异步的，所以你必须返回 observable：

// I'll change the return type, from Project, to Obsevable<Project>
getProjectByNumber(projectNumber: string): Observable<Project> {
  return this.http.get(`${ httpBaseUrl }/project/getProject/${ projectNumber }`,  httpOptions)
    // Instead of subscribe, you'll use a pipe, to map. So that others can actually subscribe (in our case the Angular router)
    .pipe(
      map(data => {
        this.logger.info("Received data, processing...");
        project = data['projectDto'];
        return project;

        // This whole `map(...)` part could have been a one-liner:
        // map(data => data.projectDto)
        // so alltogether:
        // this.http.get().pipe( map(data => data.projectDto), catchError(this.logger.error));
    },
    catchError(err => this.logger.error('Error getting project:', err.message)),
  );
}

只剩下一件事了。我们如何在组件中获取一次数据？从路线，再次。

// in the component
ngOnInit() {
  this.activatedRoute.data.subscribe(project => this.project = project);
  // or something like this for immediate value:
  // this.data = this.route.snapshot.data;
}

请注意，这将使您的页面处于“加载”状态，直到数据实际返回。如果您想并行获取数据，那是一个不同的答案，但也可以这样做。