change - Angular: el servicio compartido entre componentes no funciona

change title angular 2

Question

Tengo un servicio donde declaro mi variable. En mi componente, uso esta variable para poner datos en él.

Servicio:

@Injectable()
export class DataService {

    public msgs = [];

    constructor() { }       

}

Ahora uso esta variable en mi componente:

export class MessagesComponent implements OnInit {   

    constructor(private dataService: DataService){}

    ngOnInit() {   
        this.getData();   
    }

    getData(){
        let msgs = [];

        if (diffr <= this.geomessage[i].range) {
            this.geomessage[i].dist = diffr;
            msgs.push(this.geomessage[i]);
            //console.log("this message: ", this.geomessage[i]); //DEBUG
        }
        this.dataService.msgs = msgs;

    }    
}    

Solo he publicado el código necesario. This.dataService.msgs this.dataService.msgs lleno de mensajes, esto funciona bien. Cuando llegué a otro componente, los datos de this.dataService.msgs todavía existen, pero cuando vuelvo al this.dataService.msgs Messagescomponent this.dataService.msgs undefined está undefined hasta que lo vuelva a llenar, pero necesito los datos que this.dataService.msgs . ¿Alguien sabe cómo hacer esto?

Gracias

Answer 1

Si proporciona su DataService dentro de la matriz de proveedores de su anotación @Component ,

@Component({
    ...
    providers: [DataService],
})...

este servicio será un singleton (creará una nueva instancia) para este componente (y son hijos si no han proporcionado este servicio también bajo su anotación).

Si desea utilizar este servicio entre múltiples componentes y compartir la misma instancia del servicio; debe proporcionar este servicio en un componente / módulo que es el padre de estos componentes en el árbol DI. Si se trata de un servicio global, sugiero proporcionarlo solo en su AppModule (o en un módulo compartido).

@NgModule({
    providers:[DataService]
})

Answer 2

Solo una explicación rápida de la respuesta de echonax es que el proveedor trabaja como una jerarquía. Si lo agrega al módulo de la aplicación, funcionará en toda la aplicación y, por lo tanto, no debe ''proporcionarlo'' en ningún otro lugar. Sin embargo, si no necesita el servicio ''globalmente'', solo debe proporcionarlo en el componente principal.