我希望我的孩子組件應該看到，只有當它得到的所有數據

Question

這裏是我的代碼Plunker<a routerLink="/students">Students List</a>

好吧我關心的是，當我點擊學生名單鏈接。

來自的任何內容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> 

修改過的翻頁遊戲：https://plnkr.co/edit/AhWQPBWZVm0vrZqHY6Jr?p=preview

Answer 3

你想使用Resolve-Guard。有關如何使用它們的完整說明，我建議你看看那裏。

您可以在顯示路由組件之前預取數據。請記住將您的警衛添加到您的提供者數組中。我有一次忘了。