CODEWITHSUNDEEP
angularangular2-routing
Sudhakar
Sudhakar

Reputation: 3094

Setting route params in child component reloads the page and resets

I'm trying to set 4 route params [area, branch, date, comments] in my child component StatusTable component, when I invoke the function goto() that navigates the url, the page reloads and resets to defaults.

The issue will fix only if I pass ROUTE_PROVIDERS in StatusTable component instead of main.ts, but that will break other routes invoked with [routerLink] directive in templates. Not sure what's wrong, please help me fix the issue.

status-table.component.ts (partial)

@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 (root component)

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

Upvotes: 0

Views: 362

Answers (1)

Sudhakar
Sudhakar

Reputation: 3094

Used routerCanReuse and 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;
    }
}

Upvotes: 1

Related Questions