Para implementar una variable global, podría implementar un servicio compartido. Podrá guardar datos en él y todos los componentes podrán tener acceso a ellos.

Para esto, simplemente implemente un servicio y configure su proveedor al impulsar su aplicación:

 bootstrap(AppComponent, [ MySharedService ]);

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

Muestra

El servicio:

 export class MySharedService { data: any; dataChange: Observable<any>; 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 alcance ahora es equivalente a las variables miembro y las propiedades @Input de un componente o directiva. Cuando se refieren a elementos DOM, las propiedades vinculables también incluyen aquellos atributos o propiedades del propio elemento DOM.

En Angular1, puede definir una variable de ámbito en $rootScope y hacer referencia a ella dentro de un ámbito secundario profundamente anidado sin pasarla explícitamente a directivas debido a la naturaleza prototípica de la herencia de ámbito. En Angular2, no hay herencia de alcance. Si desea pasar datos del ámbito del componente principal al ámbito secundario inmediato, debe hacerlo explícitamente a través de los enlaces @Input de la directiva. Por ejemplo, <directive [myBinding]="model"></directive> , una propiedad de model en el ámbito del componente principal se pasa al ámbito de la directiva secundaria a través de la propiedad @Input de la directiva denominada myBinding .

El equivalente más cercano a $rootScope es la respuesta de @Thierry: usar un servicio compartido para recuperar y mutar 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 de la cadena jerárquica de componentes puede definir su propio inyector. En Angular2, la jerarquía de inyectores participa en la resolución de tipos de manera similar a como las variables de $scope se resolvieron en Angular1 usando la herencia de $scope.

Puede implementar esto usando 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); }

Escuche desde 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