isolate scope (scope: {}) en Angular moderno

Todo componente de Angular está aislado por defecto. Su template solo ve los miembros de su propia clase, y los datos cruzan la frontera por inputs y outputs.

Antes · AngularJS

app.directive('ratingStars', function () {
  return {
    restrict: 'E',
    scope: { value: '=', max: '@', onRate: '&' },
    templateUrl: 'rating-stars.html',
    link: function (scope) {
      scope.rate = function (n) {
        scope.value = n;
        scope.onRate({ value: n });
      };
    }
  };
});

Después · Angular

@Component({
  selector: 'app-rating-stars',
  templateUrl: './rating-stars.component.html',
})
export class RatingStarsComponent {
  value = model(0);
  max = input(5, { transform: numberAttribute });
  rated = output<number>();

  rate(n: number) {
    this.value.set(n);
    this.rated.emit(n);
  }
}

Qué cambia

La definición scope: { } pasa a ser campos input(), output() y model() en la clase.
Las directivas con scope: false o scope: true, que leían directamente el scope del padre, necesitan un input explícito por cada valor que usaban.
Los bindings '@' siempre entregaban strings; usa numberAttribute o booleanAttribute como transform del input para obtener tipos reales.

Consejo de migración. Empieza por las directivas que ya tienen scope aislado, porque se convierten casi de forma mecánica. Para las que comparten el scope del padre, lista cada propiedad que leen antes de tocar el código.

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