Angular 2 Confitional路由器插座显示

Question

嗨我有一种情况，我想在允许角度路由器显示页面之前等待执行几个ajax调用。我正在使用角度RC。

为了达到这个目的，我尝试做了类似的事情：

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

只要在应用程序的根组件中完成调用，isDataLoaded变量就会从false更改为true。

运行应用程序时出现以下错误：

从我在网上看到的情况发生这种情况是因为角度在搜索时没有在页面上找到路由器插座。

如何判断angular等待ajax调用完成然后执行rotuer outlet中的组件？

Answer 1

您可以使用路由配置的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();
  }
}