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

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

Проблема будет решена только в том случае, если я передам ROUTE_PROVIDERS в компоненте StatusTable вместо main.ts, но это нарушит другие маршруты, вызываемые директивой [routerLink] в шаблонах. Не знаю, что не так, пожалуйста, помогите мне решить проблему.

status-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
    })
]);

angular angular2-routing
person Sudhakar    schedule 30.03.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Б/у 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;
    }
}
person Sudhakar    schedule 30.03.2016