切換標籤/路線時如何保持表格數據

切換路線時。如何保持應用程序的狀態？我觀察到，每次切換標籤時，Angular類都會重新初始化。切換標籤/路線時如何保持表格數據

import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2' 
@Component({ 
}) 
@View({ 
    template: ` 
<input class="form-control" [value]="test"> </input> 
<br> 
{{test}} 
` 
}) 
export class SearchPage{ 
    test = `Type something here go to inventory tab and comeback to search tab. Typed data will gone. 
    I observed that Angular class is reinitialize every time I switch tabs.`; 
    } 
}

來源

2015-09-24 Code OverFlow

事實上新組件實例正在導航時創建的。您有幾種選擇來保存你的價值：在應用程序綁定服務

儲存於永久存儲（localStrage/sessionStorage的）

這plunker http://plnkr.co/edit/iEUlfrgA3mpaTKmNWRpR?p=preview實現前者

店呢一。重要位

服務（searchService.ts）

export class SearchService { 
    searchText: string; 
    constructor() { 
    this.searchText = "Initial text"; 
    } 
}

的Bootstrap應用程序時，這樣的情況下，可通過整個應用程序綁定它：

bootstrap(App, [ 
    HTTP_BINDINGS,ROUTER_BINDINGS, SearchService, 
    bind(LocationStrategy).toClass(HashLocationStrategy) 
    ]) 
    .catch(err => console.error(err));

注入它在你的SearchPage組件:(不是因爲導航時創建了新的組件實例，所以不應該重寫構造函數中的值）

export class SearchPage{ 
    searchService: SearchService; 

    constructor(searchService: SearchService) { 
    this.searchService = searchService; 
    } 

}

更新輸入服務值：

<input class="form-control" [value]="searchService.searchText" 
(input)="searchService.searchText = $event.target.value">

來源

2015-09-27 11:13:14 cghislai

切換標籤/路線時如何保持表格數據

回答

相關問題