Angular 2 Confitional路由器插座顯示

嗨我有一種情況，我想等待幾個Ajax調用被執行之前，我讓角度路由器顯示頁面。我正在使用角度RC。Angular 2 Confitional路由器插座顯示

爲了實現這個我tryed做這樣的事情：

<div *ngIf="isDataLoaded"> 
    <header-menu"></header-menu> 
    <router-outlet></router-outlet> 
    <footer-app></footer> 
</div>

的isDataLoaded變量被從false更改爲true一旦調用就會在應用程序的根組件完成。

當我跑我得到以下錯誤的應用程序：

從我在線閱讀出現這種情況，因爲角沒有找到路由器的出口imediatly在頁面上時，它用它進行查詢。

如何告訴角等待ajax調用完成，然後在rotuer插座中執行組件？

來源

2016-09-21 aleczandru

您可以使用路由配置的resolve屬性。

export const MyRoutes: Route[] = [ 
    { 
    path: 'my/path', 
    component: MyComponent, 
    resolve: { 
     myData: MyResolver 
    } 
    } 
];

並定義一個分解器類，因爲這例如

@Injectable() 
export class MyResolver implements Resolve<any> { 
    constructor(public http: Http) {} 

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
    // const name: string = route.params['name']; 
    return this.http.get('api/whatever').map(res => res.json()); 
    } 
}

data然後將在MyComponent經由ActivatedRoute實例是可用

@Component({ ... }) 
export class MyComponent implements OnDestroy, OnInit { 
    data: any[] = []; 
    routeDataSub: Subscription; 

    constructor(private route: ActivatedRoute) {} 

    ngOnInit() { 
    this.routeDataSub = this.route.data.subscribe(data => this.data = data['myData']); 
    } 

    ngOnDestroy() { 
    this.routeDataSub.unsubscribe(); 
    } 
}

來源

2016-09-22 07:11:04 Ludohen

Angular 2 Confitional路由器插座顯示

回答

相關問題