コンポーネントの再作成を停止し、コンポーネントデータをAngular2で保持したい

Question

私はangular2-webpack-starterを使用していますが、Routeは "2.0.0-rc.1"の標準ではありませんので、@ angular/route経路指定のために評価される。今

これは

@Injectable() 
export class JSTreeService { 

    constructor(private http: Http) { 

    } 
    // Uses http.get() to load a single JSON file 
    getData(): Observable<IDataItem[]> { 
    return this.http.get('url') 
     .map((res: Response) => res.json()); 

    } 


} 

これは私がサービスに加入し、他のコンポーネント

@Component({ 
    selector: 'app', 
    pipes: [], 
    providers: [JSTreeService, HTTP_PROVIDERS, SharedData], 
    directives: [], 
    encapsulation: ViewEncapsulation.None, 

    template: ` 
    <header> 
     <md-toolbar color="primary"> 
     <span>{{ name }}</span> 
     <nav> 
      <ul> 
      <li router-active> 
       <a [routerLink]=" ['Index'] ">Index</a> 
      </li> 
      | 
      <li router-active> 
       <a [routerLink]=" ['Home'] ">Home</a> 
      </li> 
      | 
      <li router-active> 
       <a [routerLink]=" ['About'] ">About</a> 
      </li> 
      | 
      <li router-active> 
       <a [routerLink]=" ['Items'] ">Items</a> 
      </li> 
      </ul> 
     </nav> 
     </md-toolbar> 
    </header> 
    <md-progress-bar mode="indeterminate" color="primary" *ngIf="loading"></md-progress-bar> 

    <main> 
     <router-outlet></router-outlet> 
    </main> 


}) 
@RouteConfig([ 
    { path: '/', name: 'Index', component: Home, useAsDefault: true }, 
    { path: '/home', name: 'Home', component: Home }, 


    { path: '/item', name: 'Items', component: ItemComponent }, 
    // Async load a component using Webpack's require with es6-promise-loader and webpack `require` 
    { path: '/about', name: 'About', loader:() => require('es6-promise!./about')('About') } 
]) 
export class App { 

    dataItem: IDataItem[]; 

    // @Input() flag 
    constructor(
    public appState: AppState, 
    private _itemData: JSTreeService, 
    private _sharedData: SharedData) { 

    } 
    getData() { 
    this._itemData.getData() 
     .subscribe(
     // the first argument is a function which runs on success 
     (data: IDataItem[]) => { 
     this.dataItem = data; 
     }, 
     // the second argument is a function which runs on error 
     err => console.error(err), 
     // the third argument is a function which runs on completion 
    () => (this._sharedData.dataItem = this.dataItem) 

    ); 

    this.flag = 1; 
    } 

    ngOnInit() { 
    console.log('Initial App State', this.appState.state); 
    console.log('hello `Item` component'); 
    this.getData(); 
    } 

} 

にそれを渡すために別のサービスにそれを渡された。これは私のルート要素である私の主成分である私のサービスです

@Component({ 
    selector: 'Item', 
    template: require('./item.html'), 
    providers: [ 
    ] 
}) 
export class ItemComponent { 
    dataItem: IDataItem[]; 
    flag: number; 

    constructor(private _sharedData: SharedData) { 

    } 

    ngOnInit() { 
    // console.log(this.dataItem); 
    this.dataItem = this._sharedData.dataItem; 

    } 

    ngOnDestroy() { 
    // this.dataItem = this._sharedData.dataItem; 
    } 
} 

これはSharedService

です

@Injectable() 
export class SharedData { 
    constructor() { 

    } 
    dataItem:IDataItem[]; 


} 

は、ここで私が正常に 'ItemComponent' にappcomponentからデータを渡すことができ、私のitem.template

<div class=""> 
    <label *ngFor="let item of dataItem"> <input type="checkbox" name="checkbox" value="value"> {{item.text}} <br></label> 
</div> 

です。だから私は私のアプリケーションをロードするたびにhttp呼び出しを購読し、SharedServiceにデータを渡します。 ItemをクリックするとItemComponentにルーティングされ、データが表示されます。 私の問題はItemにルーティングされるたびに、ItemComponentを再作成するたびにデータがなくなる問題です。私はそれを望んでいない。私はそのコンポーネントの状態を保存したい。 これは、コンポーネント間でデータをやりとりするための良い方法です。 I Angular2で初心者は、ヘルプのいずれかの種類が認識されるであろう:) 私の更新ItemComponentをしています：

@Component({ 
    selector: 'Item', 
    template: require('./item.html'), 
    providers: [ 
    // JSTreeService, 

    ] 
}) 
export class ItemComponent implements CanReuse, OnReuse { 
    dataItem: IDataItem[]; 
    flag: number; 

    constructor(private _sharedData: SharedData) { 
    // this.dataItem = params.get('dataitems'); 


    } 

    ngOnInit() { 
    // console.log(this.dataItem); 
    this.dataItem = this._sharedData.dataItem; 

    } 
    routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { 


    return true; 
    } 
    routerOnReuse(next: ComponentInstruction, prev: ComponentInstruction) { 
    // this.name = next.params['name']; 
    this.dataItem = this._sharedData.dataItem; 
    console.log(this.dataItem); 
    } 
    ngOnDestroy() { 
    // this.dataItem = this._sharedData.dataItem; 
    } 
} 

そして、はい、私はwebpackstarterキットから角度/ルータ、廃止予定@

Answer 1

を使用していますが、データを保管してください

ナビゲーションでパラメータ値のみが変更される場合は、@CanReuse()を実装してtrueを返すことができます。したがって、ルータは、そのコンポーネントが再作成されたときにそのコンポーネントを再作成します（このコンポーネントを使用して、コンポーネントを廃棄して再作成するこの状況では

routerCanReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction) : boolean | 
<boolean> { 
    return true; 
} 

これはまだ新しいRC.1ルータに実装されていません。