Alternativa a Angular scope en Angular 2.0


En Angular 2.0, no habrá $scope.

¿Cuál es la alternativa a eso? ¿Cómo podré compartir datos entre los componentes? ¿Estará disponible la opción scope en las directivas? Más prácticamente, ¿hay una alternativa actual a la que pueda familiarizarme?

Soy consciente de controller as pero leí que los controladores también serán eliminados.

Confundido en tal revolución el equipo Angular ha comenzado.

Author: jasonszhao, 2014-11-14

6 answers

Angular 2.0 utiliza this en lugar de $scope.

Uno de los principales cambios que se avecinan en la versión 2.0 es la muerte del controlador, y un nuevo énfasis en los componentes. La gran ventaja de pasar a aplicaciones basadas en componentes es que es más fácil definir sus interfaces; además, los elementos HTML ya tienen una interfaz fácilmente asignable en eventos, atributos y propiedades.

Ver la Migración de AngularJS 1.3 a 2.0 aquí. Ver también el completo documentación de Angular 2.0 aquí

 37
Author: Saidh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-27 07:35:19

En Angular2 se utilizan servicios compartidos en lugar de $scope https://angular.io/docs/ts/latest/cookbook/component-communication.html

@Injectable()
class SharedService {
  someState:String;
  someEventStream:Subject<String> = new Subject<String>();
}
@Component({
  selector: ...,
  providers: [SharedService] 
})
class MyComponent {
  constructor(private sharedService:SharedService) {}
}

Para cada proveedor ([SharedService] es la abreviatura de [{provide: SharedService, useClass: SharedService}]) en el ejemplo anterior se mantiene una sola instancia.

El alcance de tal proveedor es el componente donde se proporciona y es descendientes cuando ningún descendiente tiene registrado el mismo proveedor.

Cuando un componente solicita una dependencia constructor(private sharedService:SharedService), Angulares DI (inyección de dependencias) comienza a mirar los proveedores propios de los componentes y luego hacia arriba hacia el componente raíz y luego los proveedores registrados en bootstrap. Devuelve el primero que encuentra.

Si dos componentes recibieron la misma instancia (del mismo proveedor) inyectada, entonces pueden comunicarse usando este servicio suscribiéndose y emitiendo eventos del Subject o leyendo y escribiendo el estado o llamando a métodos en el servicio.

 14
Author: Günter Zöchbauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-04 16:51:48

Usar controller as es una buena manera de acostumbrarse a trabajar sin $scope, aunque todavía necesitará $scope para algunas cosas como observadores y eventos. Los controladores no se están eliminando realmente en Angular 2.0. Pero no habrá un equivalente a ng-controller. En lugar de tener controladores y vistas, solo tendrá directivas que esencialmente encapsulan el controlador y la vista.

 5
Author: rob,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-20 19:06:30

No me preocuparía por 2.0 en absoluto. El equipo angular ha dicho que:

Es demasiado pronto para empezar a construir algo con código 2.0 still todavía estamos en las primeras etapas de construir el proyecto.

Tratar de aprender algo que es tan temprano en el desarrollo podría terminar siendo una gran pérdida de tiempo. Dicho esto, si desea obtener un inicio rápido en Angular 2.0, el nuevo enrutador que se introdujo con 1.3 es as a partir de ahora the el enrutador que tienen la intención de usar para 2.0

 3
Author: Pytth,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-14 01:39:31

Angular 2 no comparte datos entre componentes como lo hizo Angular 1. En su lugar, lo que hacen es pasar datos utilizándolos dentro de la plantilla y pasando eventos (simplemente usando el comportamiento de burbuja que los eventos tienen por defecto). Y puede acceder a los datos del patrón utilizando la clase de componente (Eche un vistazo a los 1000000000 vídeos de "angular 2 - How to get started" en Youtube si no tiene idea de lo que quiero decir con clase).

 3
Author: Haringat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-02 12:56:42

Podemos hacer esto en angular sin inyectar un servicio en la clase de componente. Mediante el uso de rxjs subject,' Behaviour Subject', que lleva nuestros datos cumpliendo el mismo requisito que variable scope variable

Aquí hay un ejemplo de stackblitz donde exporto un const letter en sub.service.ts que está suscrito en los componentes necesarios.

 0
Author: Velen Aranha,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-21 12:53:00