Question

我正在使用angular2-webpack-starter，因为Route在“2.0.0-rc.1”中尚未达到标准，他们正在使用@ angular / route-depricated进行路由。现在

这是我的服务

@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。当我单击项目它路由到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工具包的@ angular / router-depricated

Answer 1

将数据保留在服务中并在重新创建组件时从那里获取数据（当您使用此组件路由回路径时）

对于仅导航更改参数值的情况，您可以实现@CanReuse()并返回true，这样路由器就不会在这种情况下处置和重新创建组件。

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

这在新的RC.1路由器中尚未实现。

想要停止重新创建组件并在Angular2中保留组件数据

1 个答案: