nested ng-controller and scope inheritance en Angular moderno

Los controladores anidados compartían datos por herencia de scope. Los componentes no comparten nada de forma implícita: el padre le pasa cada valor al hijo por un input.

Antes · AngularJS

<div ng-controller="OrderCtrl">
  <h2>{{ order.number }}</h2>
  <div ng-controller="LinesCtrl">
    <!-- order comes from the parent scope -->
    <p ng-repeat="line in order.lines">{{ line.sku }}</p>
    <!-- writes to the child scope only -->
    <input ng-model="filter">
  </div>
</div>

Después · Angular

@Component({
  selector: 'app-order',
  imports: [OrderLinesComponent],
  template: `
    <h2>{{ order().number }}</h2>
    <app-order-lines [lines]="order().lines" [(filter)]="filter" />
  `,
})
export class OrderComponent {
  order = input.required<Order>();
  filter = signal('');
}

// OrderLinesComponent
lines = input.required<Line[]>();
filter = model('');

Qué cambia

El template de un hijo no puede leer propiedades del padre; cada valor que necesita se declara como input.
El problema de shadowing, donde escribir un primitivo en un scope hijo creaba una copia sin avisar, desaparece; usa model() cuando el hijo debe escribir de vuelta.
Las referencias a $parent pasan a ser inputs, outputs o un servicio inyectado.

Consejo de migración. Pasa los controladores a la sintaxis controllerAs antes de migrar. Así cada referencia lleva un prefijo, y los nombres que pertenecen a un controlador externo pasan a ser la lista de inputs del nuevo componente hijo.

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