So halten Sie Formulardaten beim Wechseln von Tabs/Routen

Question

Beim Wechseln von Routen. Wie kann ich den Status der Anwendung beibehalten? Ich habe beobachtet, dass die Angular-Klasse jedes Mal neu initialisiert wird, wenn ich Tabs wechsle.

Für z. 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

der Tat neue Komponenteninstanz erstellt werden, wenn die Navigation. Sie haben mehrere Optionen, um Ihren Wert zu halten:

• speichern sie in einer App gebundenen Dienst
• Bewahren Sie es in einem persistenten Speicher (localStrage/session)

diese Plunker http://plnkr.co/edit/iEUlfrgA3mpaTKmNWRpR?p=preview implementiert die ehemalige ein. Wichtige Bits sind

der Service (searchService.ts)

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

es bindet, wenn die App bootstraping, so dass die Instanz durch die gesamte App verfügbar:

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

Injizieren Sie es in Ihrem SearchPage-Komponente: (Nicht, dass Sie den Wert im Konstruktor nicht überschreiben sollten, da bei der Navigation eine neue Komponenteninstanz erstellt wird)

export class SearchPage{ 
    searchService: SearchService; 

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

} 

Aktualisierung des Servicewerts am Eingang:

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