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

【问题标题】：How to fetch data before navigating in AngularDart?如何在 AngularDart 中导航之前获取数据？
【发布时间】：2017-08-29 15:04:33
【问题描述】：

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

我发现 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 来处理它吗？

【问题讨论】：

Angular.dart 中的当前路由器没有Resolve。根据您尝试完成的具体任务，可能会有不同的解决方法。还有人提到，Angular.dart 的新路由器正在开发中（尽管可能还需要一段时间）
感谢您的回复。我想在渲染 ProfileComponent 之前获取所有必需的数据，因为当浏览器渲染所有静态内容并且 ProfileComponent 中的某些子组件仍在等待异步 Http 结果时，我试图防止饱和。我希望我的 UI 显示为一个整体，就像服务器端渲染一样。

标签： dart angular-dart

【解决方案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 的新路由器正在开发中（尽管可能还需要一段时间）。

【讨论】：