Angular 2 – ¿Qué es equivalente al scope de la raíz?

Para implementar la variable global, puede implementar un servicio compartido. Podrá guardar datos y todos los componentes podrían tener acceso a ellos.

Para esto, simplemente implemente un servicio y configure su proveedor cuando amplíe su aplicación:

 bootstrap(AppComponent, [ MySharedService ]); 

Tenga cuidado de no definirlo de nuevo dentro del atributo providers de los componentes donde desea usarlo.

Muestra

El servicio:

 export class MySharedService { data: any; dataChange: Observable; constructor() { this.dataChange = new Observable((observer:Observer) { this.dataChangeObserver = observer; }); } setData(data:any) { this.data = data; this.dataChangeObserver.next(this.data); } } 

Úselo en un componente:

 @Component({ (...) }) export class MyComponent { constructor(private service:MySharedService) { } setData() { this.service.setData({ attr: 'some value' }); } } 

Si desea notificar a los componentes que los datos se actualizaron, puede aprovechar los campos observables en el servicio compartido:

 @Component({ (...) }) export class MyComponent { constructor(private service:MySharedService) { this.service.dataChange.subscribe((data) => { this.data = data; }); } } 

Vea esta pregunta para más detalles:

• Delegación: EventEmitter u Observable en Angular2

Esta página en el sitio web angular.io también podría interesarle:

• https://angular.io/docs/ts/latest/cookbook/component-communication.html

En Angular2, el concepto de scope ahora es equivalente a las variables miembro y @Input propiedades @Input de un componente o directiva. Cuando se refieren a elementos DOM, las propiedades enlazables también incluyen esos atributos o propiedades del elemento DOM en sí.

En Angular1, puede definir una variable de ámbito en $rootScope y hacer referencia a ella dentro de un scope hijo profundamente nested sin pasarlo explícitamente a directivas debido a la naturaleza prototípica de la herencia de scope. En Angular2, no hay herencia de scope. Si desea pasar datos desde el scope del componente principal al ámbito hijo inmediato, debe hacerlo explícitamente a través de los enlaces @Input la directiva. Por ejemplo, , una propiedad del model en el ámbito del componente principal se pasa al ámbito de la directiva @Input través de la propiedad @Input la directiva llamada myBinding .

El equivalente más cercano a $ rootScope es la respuesta de @ Thierry: el uso de un servicio compartido para recuperar y modificar datos, que se pueden inyectar en cualquier componente a través de DI. A diferencia de Angular1, que tiene un inyector global, Angular2 introduce el concepto de un inyector jerárquico. Cada componente en la cadena jerárquica de componentes puede definir su propio inyector. En Angular2, la jerarquía de los inyectores participa en la resolución de tipo de manera similar que las variables $ scope se resolvieron en Angular1 utilizando la herencia $ scope.

Puede implementar esto utilizando angular BehaviorSubject y asObservable

Verifique el código de ejemplo a continuación

Archivo de servicio

 @Injectable() export class commonService { private data = new BehaviorSubject(''); currentData = this.data.asObservable() constructor() { } updateMessage(item: any) { this.data.next(item); } } 

Componente 1

Establecer los datos de cualquier componente

  constructor(private _data: commonService) { } shareData() { this.currentValue = this.queryTerm; this._data.updateMessage(this.currentValue); } 

Escucha de cualquier componente

 constructor(private _data: commonService) { } ngOnInit() { this._data.currentData.subscribe(currentData => this.currentValue = currentData) } 

Puede comunicarse entre cualquier componente de esta manera.

Más información y otros 7 métodos