Question

这是我的代码Plunker<a routerLink="/students">Students List</a>

好的，我关注的是，当我点击学生列表链接。

在 studentlist 初始化之前， StudentComponent 中的任何内容都不可见。

注意：我正在使用settimeout函数，因为我的服务需要一些时间来返回数据。所以我只使用它来显示时间延迟。

Answer 1

这就是https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard

的守卫

import { Injectable }             from '@angular/core';
import { Router, Resolve, RouterStateSnapshot,
         ActivatedRouteSnapshot } from '@angular/router';
import { Crisis, CrisisService } from './crisis.service';
@Injectable()
export class CrisisDetailResolver implements Resolve<Crisis> {
  constructor(private cs: CrisisService, private router: Router) {}
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Crisis> {
    let id = route.params['id'];
    return this.cs.getCrisis(id).then(crisis => {
      if (crisis) {
        return crisis;
      } else { // id not found
        this.router.navigate(['/crisis-center']);
        return null;
      }
    });
  }
}

Answer 2

您可以使用*ngIf打包模板，这样如果满足该条件，您的模板就会被创建：

<div *ngIf="students">
    <h1>And here is students list</h1>

    <table>
      <tr>
        <th>Id</th>
        <th>Name</th>
      </tr>
      <tr *ngFor="let student of students">
        <td>{{student.id}}</td>
        <td>{{student.name}}</td>
      </tr>
    </table>
  </div>

编辑的plunker：https://plnkr.co/edit/AhWQPBWZVm0vrZqHY6Jr?p=preview

Answer 3

您可能想要使用Resolve-Guard。有关如何使用它们的完整说明，我建议你去看看。

您可以在显示路由组件之前预取数据。请记住将您的警卫添加到您的提供者阵列。我忘记了一次。

我希望我的子组件只有在获取所有数据时才可见

3 个答案: