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

Question

我想在路由到配置文件之前立即从远程服务获取所有数据。

我发现 typescript 版本 angular 有 Resolve 来帮助在导航前获取数据。但我在 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 可用时分配给 data，组件将显示。

另一种更通用的方法可能是创建一个可以扩展 RouterOutlet 的自定义 MyRouterOutlet 并对其进行自定义，以便在收到事件之前延迟添加组件。

添加到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 的新路由器正在开发中（尽管可能仍需要一段时间）。

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

How to fetch data before navigating in AngularDart?

dart

angular-dart