Angular 在数据解析之前，路由不会导航到路由

Question

我有一个带有详细信息页面的简单网络应用程序。当最终用户单击 link 时，路由会导航到页面，直到页面上的数据准备就绪。理想情况下，我想立即显示页面并相应地更新 UI。我做错了什么吗？下面请大家回顾一下我所拥有的

在我的路线文件中：

import { Routes } from '@angular/router';
import { DetailsComponent } from './details/details.component';

export const AppRoutes:Routes = [
 { path: 'details/:id', component: DetailsComponent },
 { path: '', redirectTo:'/home', pathMatch: 'full' }
]

单击 link 以导航到详细信息的视图

<div *ngFor="let data of privateInfo; let i = index">
      <span>{{i}}</span>
      <span><a [routerLink]="['/details', i]">Review Details</a></span>
</div>

详细信息组件

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { PrivateModel } from '../models/app-model';

@Component({
  selector: 'app-details',
  template: `
    <div>
     <pre>{{ privateInfo }}</pre>
    </div>
  `
})
export class DetailsComponent implements OnInit {
public privateInfo:Array<any>;
public detailID;

constructor(public PrivateModel:PrivateModel, private    route:ActivatedRoute) {
  this.detailID = route.snapshot.params['id'];
}

ngOnInit() {
  this. privateInfo = this.PrivateModel[this.detailID];
}
}

查看 Angular 文档似乎有一个 noPreloading class 但不确定如何使用它。任何帮助和/或额外的眼睛将不胜感激。

Answer 1

您应该在路由定义中使用解析属性，如下所示，

export const AppRoutes:Routes = [
     { path: 'details/:id', component: DetailsComponent ,resolve: {details: DetailsResolver} },
     { path: '', redirectTo:'/import', pathMatch: 'full' }
]

您的 DetailsResolver 服务必须如下所示

import { Injectable }             from '@angular/core';
import { Router, Resolve, RouterStateSnapshot,
         ActivatedRouteSnapshot } from '@angular/router';
import { DetailsService } from '....';
@Injectable()
export class DetailResolver implements Resolve<Details> {
  constructor(private cs: DetailsService, private router: Router) {}
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Details> {
    let id = route.params['id'];
    return this.cs.getDetails(id).then(details => {
      if (details) {
        return details;
      } else { // id not found
        this.router.navigate(['/error']);
        return null;
      }
    });
  }
}

Angular 在数据解析之前，路由不会导航到路由

Angular route does not navigate to route until data is resolved

javascript

typescript

angular2-routing

angular