Question

刚刚从Angularjs开始Angular 5的新项目，我无法理解解决机制。

使用Angular 1.x和ui-router，我可以在路由加载之前轻松解析数据：

(function () {
  "use strict";

  angular.module('myModule').config(function ($stateProvider) {

    $stateProvider.state('myState', {
      url: "/",
      views: {
        'main@': {
          templateUrl: "/src/modules/template.part.html",
          controller: "MyController",
          resolve: {
            something: function(ServiceA) {
              return ServiceA.getSomething();
            },
            somethingElse: function (ServiceB, something) {
              return ServiceB.getSomethingElse(something);
            },
            otherThing: function (ServiceC) {
              return ServiceC.getOtherThing();
            }
          }
        }
      }
    });
  });
})();

就是这样，我可以在something中注入somethingElse和MyController。

现在使用Angular 5，如果我理解正确的话，这就是我必须为同样的结果做的事情：

// skipping imports


@Injectable()
class ResolveA implements Resolve<any> {

  constructor(private myServicA: MyService) {}

  resolve()  {
    return this.myServiceA.getSomething()
  }
}


@Injectable()
class ResolveB implements Resolve<any> {

  constructor(private myServiceB: MyService) {}

  resolve()  {
    return this.myServiceB.getSomethingElse()
  }
}


@Injectable()
class ResolveC implements Resolve<any> {

  constructor(private myServiceC: MyService) {}

  resolve()  {
    return this.myServiceC.getOther()
  }
}

const routes: Routes = [
  {
    path: '',
    component: TestComponent,
    resolve: {
      dataA: ResolveA,
      dataB: ResolveB,
      dataC: ResolveC
    }
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [
    MyService,
    ResolveA,
    ResolveB,
    ResolveC
  ]
})
export class TestRoutingModule { }

我一定错过了一些东西，因为这似乎只是3 return的很多代码。是否根本没有可能在我的路线的resolve部分声明内联函数或其他内容？我看到的任何地方我都无法找到这个问题的答案，我只看到简单的tutos和演示，但是一个有5-10个决议的大型应用来自不同的服务呢？

或者我应该在我的组件的ngOnInit函数中执行此操作？但它感觉不对......

这更像是一种良好的做法＆＃34;在我开始一个大项目之前的问题，我只是想确保我做得对。我已经设法通过在单个解析器中的所有可观察对象上执行forkJoin来删除一些代码，但同样，这并没有感觉完全正确。

如何在Angular 5路由中有效地处理许多解决方案？

0 个答案: