dart - 在AngularDart中导航之前如何获取数据？

Question

我想在路由到Profile之前一次从远程服务获取所有数据。

我发现 typescript 角型具有解决以帮助在导航之前获取数据。但是我找不到Dart版本中的任何示例(angular2:^ 3.0.0)。

@RouteConfig(const [
  const Route(path: '/', name: 'Home', component: HomeComponent, useAsDefault: true]),
  const Route(path: '/profile', name: 'Profile', component: ProfileComponent),])
class AppComponent implements OnInit{

}

有人知道如何使用Dart处理它吗？

Answer 1

Angular.dart中的当前路由器没有Resolve。
根据您尝试完成的工作，可能会有不同的解决方法。

通常只用以下命令包装组件模板的内容

<template [ngIf]="data != null"> ... </template>

应该这样做，然后在可用时分配给 data并显示组件。

另一种更通用的方法可能是创建一个自定义的 MyRouterOutlet，它可以扩展 RouterOutlet并对其进行自定义，以使其延迟添加组件，直到接收到事件为止。

添加到 RouterOutlet

@HostBinding() 
dataArrived() {
  // call the code that actually adds the component
}

然后像

<router-outlet fetchDataDirective></router-outlet>

和类似的指令

@Directive(selector: '[fetchDataDirective]')
class FetchDataDirective implements OnInit {
  final DataService dataService;
  FetchDataDirective(this.dataService);

  @Output() 
  get dataArrived => _dataArrived.stream; 
  final _dataArrived = new StreamController(); 

  ngOnInit() async {
    await dataService.fetchData();
  }
}

发出 RouterOutlet等待的事件。

还提到了一个用于Angular.dart的新路由器正在开发中(尽管可能还需要一段时间)。