主应用程序组件中的Angular2 Update功能重置当前组件

Question

我的应用程序看起来像这样：

app.component.ts

import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import { NgClass } from 'angular2/common';

import { FactoryService } from './factory.service';
import { FactoryComponent } from './factory.component';

@Component({
  selector: 'my-app',
  templateUrl: 'templates/app.component.html',
  styleUrls: [],
  directives: [ROUTER_DIRECTIVES, NgClass],
  providers: [
    ROUTER_PROVIDERS,
    FactoryService
  ]
})
@RouteConfig([
  {
    path: '/',
    name: 'Dashboard',
    component: DashboardComponent
  },
  {
    path: '/factory',
    name: 'Factory',
    component: FactoryComponent
  }
])
export class AppComponent {
    currentTab: string = "dashboard";
    private factory;
    private updateFunc = setInterval(() => this.updateGame(), 1000 );

    constructor(
        private _factoryService: FactoryService){
            this.factory = this._factoryService.getFactory(1);
        }

    updateGame(){
        this.factory.update();
    }
}

factory.component.ts

import { Component, OnInit } from 'angular2/core';
import { Router } from 'angular2/router';
import { NgClass } from 'angular2/common';

import { Factory } from './factory';
import { FactoryService } from './factory.service';

import { Capitalize } from './capitalize.pipe';
import { MapToIterable } from './maptoiterable.pipe';

@Component({
    selector: 'my-factory',
    templateUrl: 'templates/factory.component.html',
    styleUrls:  ['css/factory.component.min.css'],
    directives: [NgClass],
    pipes: [Capitalize, MapToIterable]
})
export class FactoryComponent implements OnInit {

    factory: Factory;
    activeTab: string = "grinder";
    editingFactoryName: boolean = false;

    constructor(
        private _router: Router,
        private _factoryService: FactoryService) { }

    ngOnInit() {
        this.factory = this._factoryService.getFactory(1);
    }
}

然后在我的Factory组件中，每当我尝试做任何事情时，UI都会重置，就像我按一个标签显示某些内容会立即返回到初始状态而我无法导航。

如何在不重置当前状态的情况下实现更新APP状态的更新功能？

我愿意发布更多必要的代码。提前谢谢。

Answer 1

从组件中删除ROUTER_PROVIDERS：

@Component({
  selector: 'my-app',
  templateUrl: 'templates/app.component.html',
  styleUrls: [],
  directives: [ROUTER_DIRECTIVES, NgClass],
  providers: [
    ROUTER_PROVIDERS,
    FactoryService
  ]
})

仅将其添加到bootstrap(AppComponent, [ROUTER_PROVIDERS]);

ROUTER_PROVIDERS需要是全局的，如果将其添加到组件，它将获得不同的（新）实例。