Angular - общий сервис между компонентами не работает

Question

У меня есть сервис, где я объявляю свою переменную. В моем компоненте я использую эту переменную, чтобы поместить в нее данные.

Обслуживание:

@Injectable()
export class DataService {

    public msgs = [];

    constructor() { }       

}

Теперь я использую эту переменную в моем компоненте:

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;

    }    
}    

Я только разместил необходимый код. this.dataService.msgs заполненный сообщениями это работает отлично. Когда я попал в другой компонент, данные this.dataService.msgs все еще существуют, но когда я вернусь к Messagescomponent this.dataService.msgs является undefined пока я не заполню его снова, но мне нужны данные, которые были в нем. Кто-нибудь знает, как это сделать?

Спасибо

Answer 1

Если вы предоставляете DataService внутри массива провайдеров вашего @Component аннотаций,

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

эта служба будет одноэлементной (она создаст новый экземпляр) для этого компонента (и это дочерние элементы, если они не предоставили эту услугу также под своей аннотацией).

Если вы хотите использовать эту службу среди нескольких компонентов и использовать один и тот же экземпляр службы; Вы должны предоставить эту услугу в компоненте / модуле, который является родителем этих компонентов в дереве DI. Если это глобальная служба, я предлагаю предоставить ее только в вашем AppModule (или в общем модуле).

@NgModule({
    providers:[DataService]
})

Answer 2

Просто быстрое уточнение ответа echonax, что поставщик работает как иерархия. Если вы добавите его в модуль приложения, он будет работать во всем приложении, и поэтому вам не следует "предоставлять" его где-либо еще. Однако, если сервис не нужен "глобально", просто предоставьте его в родительском компоненте.