Angular 2：uiRouter 在根组件中获取当前状态参数

Question

如何在根组件中获取参数？ (app.component.ts)

我有这样的 app.component.ts（我正在使用 Angular/Cli）：

...

import {Transition} from "@uirouter/angular";
...

export class AppComponent {
  id: any;

  constructor(private trans: Transition) {
    this.id = trans.params().someId;
  }
}

但我明白了：

ERROR Error: No provider for Transition!

但是，如果我在任何内部组件（具有路由）中使用相同的逻辑 - 一切都很好。我做错了什么？

还有！

我正在使用ngx-restangular。我在app.module.ts:

// Function for settting the default restangular configuration
export function RestangularConfigFactory (RestangularProvider, authService) {
  RestangularProvider.setBaseUrl('http://api.test.com/v1');

  // This function must return observable
  var refreshAccesstoken = function () {
    // Here you can make action before repeated request
    return authService.functionForTokenUpdate();
  };

  RestangularProvider.addErrorInterceptor((response, subject, responseHandler) => {
    if (response.status === 403) {

      /*Here somehow I need to get route params too, is it possible, and how?*/

      refreshAccesstoken()
      .switchMap(refreshAccesstokenResponse => {
        //If you want to change request or make with it some actions and give the request to the repeatRequest func.
        //Or you can live it empty and request will be the same.

        // update Authorization header
        response.request.headers.set('Authorization', 'Bearer ' + refreshAccesstokenResponse)

        return response.repeatRequest(response.request);
      })
      .subscribe(
        res => responseHandler(res),
        err => subject.error(err)
      );

      return false; // error handled
    }
    return true; // error not handled
  });
}

// AppModule is the main entry point into Angular2 bootstraping process
@NgModule({
  bootstrap: [ AppComponent ],
  imports: [ 
    // Importing RestangularModule and making default configs for restanglar
    RestangularModule.forRoot([authService], RestangularConfigFactory),
  ],
})

我如何才能获得路由参数？

Answer 1

选项 1：路由到根组件

如果你目前在 index.html 中有：

<root-component></root-component> <!-- has a ui-view inside it -->

和

bootstrap: RootComponent

---

您可以切换到引导 UIView：

<ui-view></ui-view>

和

bootstrap: UIView

然后路由到你的根组件

const rootState = { component: RootComponent }

那么你的根组件将能够注入初始的Transition

查看示例应用以获取示例：

https://github.com/ui-router/sample-app-angular/blob/e8f8b6aabd6a51bf283103312930ebeff52fe4c3/src/app/app.module.ts#L37

https://github.com/ui-router/sample-app-angular/blob/e8f8b6aabd6a51bf283103312930ebeff52fe4c3/src/app/app.states.ts#L7-L18

选项2：使用transition start observable

class RootComponent {
  constructor(router: UIRouter) {
    this.subscription = router.globals.start$.subscribe((trans: Transition) => console.log(trans)))
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

选项 3：使用过渡挂钩

如果您尝试对初始转换执行一些操作，请在转换挂钩中执行此操作

function configFn(router: UIRouter) {
  router.transitionService.onStart({}, function(trans: Transition) {
    if (trans.$id === 0) {
      return somepromise; // Allows async, etc
    }
  }
}