page - Angular 2: ¿qué es equivalente al alcance de la raíz?

router angular navigationend

Question

¡Todos! Tengo este componente donde cuando hago clic en href se supone que establece una variable como Root Scope si fue Angular 1 como este:

selector: ''my-component''
template : `
            <div (click)="addTag(1, ''abc'')">`

constructor() {
    this.addTag = function(id, desc){
        myGlobalVar = { a: id, b: desc};
    };

Luego, en mi componente principal, la página en sí (de hecho) debería hacer algo como:

<my-component></my-component>
<p>My Component is returning me {{ ?????? }}

¿Cuál es el mejor enfoque para hacer tal cosa?

Answer 1

En Angular2, el concepto de alcance 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 aquellos atributos o propiedades del elemento DOM mismo.

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 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 @Input través de la propiedad @Input la directiva llamada myBinding .

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

Answer 2

Para implementar una 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 al reiniciar 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

Answer 3

Puede implementar esto utilizando angular BehaviorSubject y asObservable

Verifique el siguiente código de ejemplo

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