Настройка параметров маршрута в дочернем компоненте перезагружает страницу и сбрасывает

Question

Я пытаюсь установить 4 параметра маршрута [область, ветвь, дата, комментарии] в моем дочернем компоненте StatusTable, когда я вызываю функцию goto(), которая перемещает URL-адрес, страница перезагружается и сбрасывается до значений по умолчанию.

вопрос будет исправить только, если я прохожу ROUTE_PROVIDERS в StatusTable компонента вместо main.ts, но это будет нарушать другие маршруты, вызываемые с [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; 
    } 
}