javascript - 在数据解析之前，Angular 路线不会导航到路线

Question

我有一个简单的网络应用程序，有一个详细信息页面。当最终用户单击链接时，路线会导航到该页面，直到页面上的数据准备就绪。理想情况下，我想立即显示页面并相应地更新 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' }
]

查看点击链接导航到详细信息的位置

<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类但不知道如何利用它。任何帮助和/或额外的关注将不胜感激。

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;
      }
    });
  }
}