想停下来重新创建组件和Angular2坚持元件数据

Question

我使用angular2-的WebPack起动，由于路线是不是标准尚未在“2.0.0-RC.1”，他们正在使用@角/路由 - 为了路由目的而定制。现在

这是我的服务

@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[]; 


} 

这里是我的item.template

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

我能成功地从appcomponent数据传递到 'ItemComponent'。所以，无论何时加载我的应用程序，它都会订阅http调用并将数据传递给SharedService。当我点击Item时，它会路由到ItemComponent，它会显示数据。 现在我的问题是每次路由到Item时，它每次重新创建ItemComponent时，我的数据都会消失。我不想要它。我想存储该组件的状态。 这是在组件之间传递数据的好方法。我在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包角/路由器depricated

Answer 1

保持数据当组件重新创建一个服务，并从中获取它（当你回路由的路由与此组件）

对于情况下，导航只是改变参数值，就可以实现@CanReuse()并返回true，所以路由器没有按” t处理并重新创建组件在这个情况下。

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

这还没有在新的RC.1路由器中实现。