在 Angular 降级组件中访问 $stateParams

Question

I'm currently working on a hybrid project Angular/AngularJS, we are using downgradeComponent from Angular and it is working impressively well.

Besides it's fairly easy dynamics, sometimes we encounter some obstacles. There is this page that uses an url param for a few features, that was working pretty well in AngularJS, but now, routing to the new Angular version, it's not working at all.

The previous route state, pointing to the old page looked like this:

.state('userEdit', {
    title: 'routes_userEdit',
    url: '/user/:id',
    template: require('html-loader!./user/userEdit.html').default,
    controller: 'UserEditController'
})

This way, the id parameter could easily be accessible at UserEditCntroller.js using $stateParams.id

But now, with the new Angular component it looks like this

.state('userEdit', {
    title: 'routes_userEdit',
    url: '/user/:id',
    template: `<ng2-user-edit></ng2-user-edit>`
})

It's similar to the previous code, but the template being an Angular component it can't access AngularJS's $stateParams .

My question is.. How do I access $stateParams in an Angular2+ downgraded component? I already tried using Angular's ActivatedRoute component, but it returns an empty array of params.

Answer 1

If Angularjs rules routing, u can access $stateParams as usual ng1 service:

providers: [
    {provide: '$stateParams', useFactory: (i: any) => i.get('$stateParams'), deps ['$injector']}
]

And in component @Inject('$stateParams') $stateParams