Угловые2 хранилища теряют данные после навигации

Question

У меня есть приложение Angular2, написанное в TS, использующее Ionic для определения состояния и маршрутизации страницы.

Грубая компоновка заключается в следующем: type.component.html - это вид для type.component.ts, который импортирует store.store.ts, который расширяет класс base.store.ts

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

Plunkr, который демонстрирует дефект (просто просмотрите магазин, вернитесь, используя верхнюю левую кнопку назад, снова просмотрите магазин ... данные отсутствуют). http://embed.plnkr.co/M5FO3CKQsvOSacTbkgdV/

Ошибка здесь, если я;

1. Перейдите на страницу, на base.store и конструкторы type.store в дозвонились, данные инициализируется, и отображает на экране.

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

3. Я могу даже перейти к другому компоненту, идентично определенному с использованием другого магазина, который расширяет тот же base.store (также идентичный). Такое же поведение появляется, и я могу взаимодействовать с ним.

4. Однако; как только я уйду на другую страницу, затем вернусь к тому же, набор данных пуст или не отображается на странице; а конструкторы или события загрузки не срабатывают.

Я думаю, возможно, это связано с тем, как настроено мое наследование магазина, иначе я не уверен.

Соответствующий код:

component.html

<ion-item *ngFor="let type of types$ | async"> 
    {{type.name}} 
</ion-item> 

component.ts

@Component({ 
    templateUrl: 'build/components/types.component.html' 
}) 
export class TypesComponent {  
    private types$: Observable<Array<Type>>;  
    constructor(private navController: NavController, private typeStore: LiftTypeStore) { 
    this.types$ = this.typeStore.types$; }} 

store.ts

@Injectable() 
export class TypeStore extends BaseStore { 

    protected _subject$: Subject<Array<Type>>; 
    options; 

    constructor(protected http: Http, protected configService: ConfigService) { 
    super(http, configService); 

    this.options = { 
     collection: "types", 
     model: "Type", 
     route: "types" 
    }; 
    this.init(this.options); 
    } 

    get types$() { 
    return this._subject$.asObservable(); 
    } 

base.store.ts

export class BaseStore { 

    protected options: { 
    collection: string, 
    model: string, 
    route: string 
    }; 
    protected _subject$: Subject<Array<any>>; 
    protected dataStore: {}; 

    constructor(protected http: Http, protected configService: ConfigService) { 
    } 
    init(options) { 
    this.options = options; 
    this.dataStore = {}; 
    this.dataStore[options.collection] = []; 
    this._subject$ = <Subject<Array<any>>>new Subject(); 
    this.load(); 
    } 

    load() { 
    this.http.get(this.configService.getBaseUrl() + this.options.route).map(response => response.json()).subscribe(
     data => { 
     console.log("base store load"); 
     this.dataStore[this.options.collection] = data; 
     this._subject$.next(this.dataStore[this.options.collection]); 
     }, 
     error => console.log('Could not load', this.options.collection)); 
    } 

и app.ts

ionicBootstrap(MyApp, [ConfigService, TypeStore, LogStore]); 

Answer 1

Welp, основной его ...

Оказывается, инъекционным магазин App широким во время начальной загрузки была причиной проблемы. Как только я удалился оттуда и добавил в качестве поставщика [поставщикам] в конструкторе Component, все работало отлично.

Я не уверен, почему это произойдет, так как единственное различие должно быть быть экземпляром экземпляра один раз, а затем передаваться всем, кто этого хочет. Теперь он создается каждый раз, когда компонент. Но, дефект разрешен ...