javascript - Angular 2 : uiRouter get current state params in root component

Question

如何获取根组件中的参数？ (应用程序组件.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 错误:没有过渡提供程序!

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

还有!

我正在使用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 }

然后你的根组件将能够注入(inject)初始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:使用转换开始可观察

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

选项 3:使用转换钩子(Hook)

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

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