为 Angular 2 中路由的通用组件提供异步依赖项。路由的解析等效项答案

【问题标题】：Provide async dependencies to route's generic components in Angular 2. Route's resolve equivalent为 Angular 2 中路由的通用组件提供异步依赖项。路由的解析等效项
【发布时间】：2016-05-15 04:44:44
【问题描述】：

我想提供一组通用组件，这样他们就不知道提供依赖的服务。依赖这样的组件是承诺。换句话说，我想让例如数据访问超出这些通用组件的范围。任何依赖项，尤其是要渲染的数据和组件配置，都应该由声明组件的上下文提供给组件。当我将 view 中的组件声明为 DOM 标签时，这很容易，例如：

<generic-component data="getSomeData()" configuration="componentConfig"></generic-component>

但是当组件被直接调用为路由时，我该如何处理呢？

我已经阅读了very similar issue，但对这个问题的回答绝对不能让我满意。接受将依赖项放入组件的答案建议，但这意味着失去组件的通用方式。

在 Angular 1 中，这样做的方法是使用路由声明的 resolve 属性。 Angular 2 中的 Angular 1 解析等效于什么？

请参考mentioned question's 示例，因为它非常准确。

【问题讨论】：

标签： javascript routing components angular

【解决方案1】：

我遇到了完全相同的问题。

Route 将包含泛型组件的专用组件可能是解决方案。但这并不优雅，而是绕过而不是解决方案。

【讨论】：

【解决方案2】：

RC 4 中的 Angular 2 引入了 Route 的 resolve 属性。

此属性是具有实现 Resolve 接口的属性的对象。

每个解析器必须是@Injectable 并且具有返回 Observable|Promise|any 的方法 resolve。

当您将 ActivatedRoute 作为route 注入组件时，您可以从 route.snapshod.data['someResolveKey'] 访问每个已解析的属性。

来自 angular.io 文档的示例：

class Backend {
  fetchTeam(id: string) {
    return 'someTeam';
  }
}
@Injectable()
class TeamResolver implements Resolve<Team> {
  constructor(private backend: Backend) {}
  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    return this.backend.fetchTeam(route.params.id);
  }
}
@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        resolve: {
          team: TeamResolver
        }
      }
    ])
  ],
  providers: [TeamResolver]
})
class AppModule {}

或者您也可以提供具有相同签名的函数而不是类。

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        resolve: {
          team: 'teamResolver'
        }
      }
    ])
  ],
  providers: [
    {
      provide: 'teamResolver',
      useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => 'team'
    }
  ]
})
class AppModule {}

你可以在组件中获取数据：

export class SomeComponent implements OnInit {
    resource : string;
    team : string;

    constructor(private route: ActivatedRoute) {
    }

    ngOnInit() {
        this.team = this.route.snapshot.data['team'];

        // UPDATE: ngOnInit will be fired once,
        // even If you use same component for different routes.
        // If You want to rebind data when You change route
        // You should not use snapshot but subscribe on
        // this.route.data or this.route.params eg.:
        this.route.params.subscribe((params: Params) => this.resource = params['resource']);
        this.route.data.subscribe((data: any) => this.team = data['team']);
    }

}

希望对你有帮助，愉快的黑客攻击！

【讨论】：