Угловой Д.И. Синглтон - PullRequest
Новая
       15

Угловой Д.И. Синглтон

1 голос
/ 10 июня 2019

У меня есть служба MyService, объявленная со следующим декоратором: 

@Injectable({
    providedIn: 'root'
})

Выдержка из ее реализации: 

private myData: string = '';

setData(data: string) {
   this.myData = data;
}

getData(): string {
    return this.myData;
}

У меня есть компонент MyComponent и егоURL-адрес http://localhost:4200/sn8j8h.При первой загрузке (переходя к ней с использованием маршрутов) я установил данные службы: 

constructor (private srv: MyService) { }

ngOnInit() {
    let s = this.srv.getData();
}

// this event triggers as I have demonstrated it by putting break points in
onSomeEvent() { 
    this.srv.SetData('my data');
}

Но при второй загрузке (нажав клавишу Enter, когда мой фокус находится в адресной строке браузера, гдеURL http://localhost:4200/sn8j8h), ngOnInit, srv.getData() возвращает пустую строку вместо предыдущих данных my data.

В документации сказано, что DI с provided in root повторно используется в приложении.Но в моем примере он, кажется, не используется повторно.

Есть идеи?

Ответы [ 2 ]

2 голосов
/ 10 июня 2019

Это происходит потому, что после перезагрузки приложения (нажав ENTER или F5), все приложение перезагружается. Таким образом, любые данные, ранее сохраненные службой или компонентом, будут потеряны.

Для решения этой проблемы может быть 2 подхода:

  1. Использование localStorage, которое Дебабрата Пол Чоудхури уже объяснил. Итак, я не буду вдаваться в это. Если вы не собираетесь сохранять какую-либо сторону клиента данных, которая будет иметь собственную реализацию и варианты использования (согласованность данных), когда вы начнете сохранять сторону клиента данных.

  2. Я бы порекомендовал вам создать угловой поток компонентов таким образом, чтобы данные автоматически устанавливались перед загрузкой компонента. И если данные пусты, компонент должен обрабатывать их правильно.

Это зависит от вашего бизнес-варианта реализации.

0 голосов
/ 10 июня 2019

Когда вы нажимаете ENTER на URL браузера, данные, хранящиеся в сервисах, будут потеряны, потому что приложение перезагружено.Чтобы получить данные после нажатия Enter на URL браузера, вы должны хранить данные в локальном хранилище и куки, а также вместе с сервисом. 

private myData: string = '';

    setData(data: string) {
      this.myData = data;
      localStorage.setItem("dataKey",data);    
    }

    getData(): string {
       return this.myData? this.myData :localStorage.getItem("dataKey");
    }

Для удаления элемента из локального хранилища вы можете использовать 

localStorage.removeItem("dataKey");
...