$stateParams / $routeParams en Angular moderno

Con withComponentInputBinding, el router entrega los parámetros de ruta, los query params y los datos de resolve directamente a los inputs del componente. ActivatedRoute sigue disponible cuando necesitas los valores crudos.

Antes · AngularJS

app.controller('UserDetailCtrl', function ($stateParams, UserService) {
  var vm = this;
  vm.tab = $stateParams.tab || 'profile';
  UserService.get($stateParams.id).then(function (user) {
    vm.user = user;
  });
});

Después · Angular

// app.config.ts
provideRouter(routes, withComponentInputBinding())

// route: { path: 'users/:id', component: UserDetailComponent }
export class UserDetailComponent {
  private users = inject(UserService);

  id = input.required<string>();     // :id
  tab = input('profile', {           // ?tab=
    transform: (v: string | undefined) => v ?? 'profile',
  });

  user = toSignal(
    toObservable(this.id).pipe(switchMap(id => this.users.get(id))),
  );
}

Qué cambia

El nombre del input debe coincidir con el del parámetro; el valor llega como string, así que convierte los números con un transform.
Un query param ausente llega como undefined y reemplaza el valor por defecto del input; usa un transform para recuperarlo.
El router reutiliza el componente cuando solo cambian los parámetros, así que reacciona al input en vez de leerlo una sola vez.

Consejo de migración. Los controladores viejos leían $stateParams una sola vez porque ui-router los reconstruía en cada transición. Revisa ese supuesto en cada uno; suele ser la razón por la que una pantalla de detalle migrada muestra datos viejos.

Relacionado

¿Planeas una migración o una plataforma de microfrontends?

En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.

Escríbeme por LinkedIn