Come mantenere i dati del modulo quando si cambiano le schede/i percorsi

Question

Durante il passaggio delle rotte. Come mantenere lo stato dell'applicazione così com'è? Ho osservato che la classe Angolare viene reinizializzata ogni volta che cambio scheda.

Ad es. Plunker

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.`; 
    } 
} 

Answer 1

Infatti nuova istanza del componente vengono creati durante la navigazione. Sono disponibili diverse opzioni per tenere il vostro valore:

• conservarla in un servizio di app-bound
• Conservarlo in una memoria permanente (localStrage/sessionStorage)

questo plunker http://plnkr.co/edit/iEUlfrgA3mpaTKmNWRpR?p=preview implementa l'ex uno. pezzi importanti sono

il servizio (searchService.ts)

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

legandolo quando bootstraping l'applicazione, in modo che l'istanza è disponibile attraverso l'intera applicazione:

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

iniettarlo nel vostro Componente SearchPage: (non è necessario non sovrascrivere il valore nel costruttore poiché viene creata una nuova istanza del componente durante la navigazione)

export class SearchPage{ 
    searchService: SearchService; 

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

} 

Aggiornamento del valore di servizio su input:

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