Jak zachować dane formularza podczas przełączania kart/tras

Question

Podczas przełączania tras. Jak zachować stan aplikacji w obecnej formie? Zaobserwowałem, że klasa Angular jest reinicjalizowana za każdym razem, gdy przełączam karty.

Na przykład. 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

istocie nowy przykład składnik są tworzone podczas nawigacji. Masz kilka opcji, aby pomieścić swoją wartość:

• przechowywać go w aplikacji związany usługi
• przechowywać je w pamięci trwałej (localStrage/sessionStorage)

to plunker http://plnkr.co/edit/iEUlfrgA3mpaTKmNWRpR?p=preview implementuje byłego jeden. Ważne bity są

usługa (searchService.ts)

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

związanie go kiedy bootstraping aplikację tak, że instancja jest dostępny przez cały app:

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

wstrzykiwanie go w swoim Składnik SearchPage: (nie należy przesłonić wartości w konstruktorze, ponieważ podczas nawigacji utworzono nową instancję składnika)

export class SearchPage{ 
    searchService: SearchService; 

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

} 

Aktualizacja wartości usługi na wejściu:

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