子コンポーネントのルートパラメータを設定すると、ページが再読み込みされ、リセットされます

Question

子コンポーネントStatusTableコンポーネントに4つのルートパラメータ[エリア、分岐、日付、コメント]を設定しようとしています.を呼び出すと、ページがリロードされ、デフォルトにリセットされます。

私はStatusTableコンポーネントの代わりに、main.tsにROUTE_PROVIDERSを渡した場合、問題は解決しますが、それはテンプレートで[routerLink]ディレクティブで呼び出された他のルートを中断します。 何が問題なのかよくわからない、問題を解決するのを手伝ってください。

ステータスtable.component.ts（部分）

@Component({ 
    selector: 'status-table', 
    templateUrl: 'app/status/status-table.template.html', 
    providers: [DataService], 
    pipes: [FilterDiffPipe, ValuesPipe], 
    directives: [BuildHealth, Diff, CommentPanel, PlatformResult, ROUTER_DIRECTIVES], 
    styleUrls: ['app/status/status.table.css'] 
}) 

export class StatusTable implements OnInit, OnChanges, OnActivate, OnDestroy { 
    constructor(
     private dataService: DataService, 
     private router: Router, 
     private routeParams: RouteParams, 
     private eventService: EventService, 
    ) { 
     this.branch = this.routeParams.get('branch') || 'b7_0'; 
     this.regrDate = '2015-10-06' || this.routeParams.get('date') || moment().format('YYYY-MM-DD'); // '2015-10-10'; 
     this.regrArea = this.routeParams.get('area') || 'server'; 
} 

    goto(area, branch, date, comments) { 
      this.router.navigate(['Home', this.setRouteParams(area, branch, date, comments)]); // this causes page reload and params reset 
      this.getRegressionStatus(area, branch, date, comments); 
     } 
} 

app.component.ts（ルートコンポーネント）

@Component({ 
    selector: 'app', 
    template: ` 
    <div class="wrapper"> 
     <navbar></navbar> 
     <div class="content-wrapper container-fluid"> 
      <div class="row"> 
      <div class="col-md-12"> 
      <div class="alert alert-danger" role="alert" [hidden]="!showError">{{error}}</div> 
      <router-outlet></router-outlet> 
      </div> 
      </div> 

     </div> 
     <app-footer></app-footer> 
    </div> 
    `, 
    directives: [Navbar, Sidebar, Footer, ROUTER_DIRECTIVES], 
    providers: [DataService, EventService] 
}) 

@RouteConfig([ 
    { 
     path: '/status', 
     name: 'Home', 
     component: StatusTable, 
     useAsDefault: true 
    }, { 
     path: '/platform', 
     name: 'Platform', 
     component: PlatformResult 
    }, { 
     path: '/**', 
     name: 'Other', 
     redirectTo: ['Home'] 
    }]) 

export class AppComponent {} 

main.ts

let eventService = new EventService(); 
bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS, provide(LocationStrategy, { 
     useClass: PathLocationStrategy 
    }), 
    provide(EventService, { 
     useValue: eventService 
    }) 
]); 

Answer 1

中古routerCanReuseとrouterOnReuse

routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { return true; } 

routerOnReuse(next: ComponentInstruction, prev: ComponentInstruction) { 
    try { 
     this.regrArea = next.params['area']; 
     this.regrDate = next.params['date']; 
     this.branch = next.params['branch']; 
     this.showComments = JSON.parse(next.params['comments']); 
    } catch (e) { 
     this.showComments = false; 
    } 
}