Angular2在導航後丟失數據

我有一個用TS寫的Angular2應用程序，它使用Ionic進行狀態和頁面路由。Angular2在導航後丟失數據

粗略佈局如下; type.component.html是type.component.ts的視圖，它導入一個商店type.store.ts，它擴展了一個類base.store.ts

我試圖將商店作爲單例注入到我的應用程序，因爲它只是數據庫CRUD對類型的操作，並沒有多大意義，並且相同的數據集將以多個組件呈現。

顯示缺陷的Plunkr（只是查看存儲，使用左上角後退按鈕，再次查看存儲...數據丟失）。 http://embed.plnkr.co/M5FO3CKQsvOSacTbkgdV/

這個錯誤在這裏，如果我;

導航到頁面，base.store和type.store的構造函數被調用，數據被初始化並顯示在屏幕上。
我可以在閒暇時添加/編輯/刪除數據庫和組件視圖，如我所期望的那樣完全更新。
我甚至可以轉到另一個組件，使用擴展了相同base.store（也是相同的）的不同商店進行相同定義。同樣的行爲，它出現了，我可以與它互動。
但是;一旦我離開了另一個頁面，然後回到相同的頁面，數據集是空的或沒有顯示在頁面上;並且構造函數或加載事件不會觸發。

我在想也許這是關於我的商店繼承設置的方式，否則我不確定。

相關的代碼：

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]);

來源

2016-08-07 Joshua Ohana

這看起來很奇怪。你能以某種方式創建一個Plunker與這些代碼和模擬數據，所以我們可以玩嗎？ –

@HarryNinh讓它在Plunkr，同樣的技術堆棧和設置中複製，http://embed.plnkr.co/M5FO3CKQsvOSacTbkgdV/ –

韋爾普，固定它...

原來的引導期間，噴射商店App寬是造成問題。一旦我從那裏移除並在Component構造函數中作爲提供者添加到[providers]，那麼一切都很完美。

我不知道爲什麼會發生這種情況，因爲唯一的區別應該是是商店被實例化一次，然後傳遞給任何需要它的人。現在每次組件時都會創建它。但是，缺陷已解決...

來源

2016-08-07 14:14:16

Angular2在導航後丟失數據

回答

相關問題