在子组件设置路线PARAMS重新加载页面并重置 [英] Setting route params in child component reloads the page and resets

问题描述

我试图设置4路PARAMS [区域，分公司，日期，评论]在我的子组件 StatusTable 组件，当我调用函数转到（）的导航网址，页面重新加载和重置为默认值。

如果我通过这个问题只会修复 ROUTE_PROVIDERS 在 StatusTable 组件，而不是主.TS ，但将打破与调用其他路线模板[routerLink] 指令。
不知道什么是错的，请帮我解决这个问题。

状态-table.component.ts （部分）

  @Component（{
    选择：'状态表'，
    templateUrl：应用程序/状态/状态-table.template.html'，
    供应商：[DataService的]
    管：[FilterDiffPipe，Values​​Pipe]
    指令：[BuildHealth，DIFF，CommentPanel，PlatformResult，ROUTER_DIRECTIVES]
    styleUrls：应用程序/状态/ status.table.css']
}）出口类StatusTable实现的OnInit，OnChanges，OnActivate，{的OnDestroy
   构造函数（
        私人的DataService：DataService的，
        私人路由器：路由器，
        私人routeParams：RouteParams，
        私人eventService：EventService，
    ）{
        this.branch = this.routeParams.get（'分支'）|| b7_0';
        this.regrDate ='2015年10月6日'|| this.routeParams.get（'日'）|| 。那一刻（）格式（YYYY-MM-DD'）; //'2015年10月10日;
        this.regrArea = this.routeParams.get（'区'）|| '服务器';
}    后藤（区，分公司，日期，评论）{
            this.router.navigate（['家'，this.setRouteParams（区，分公司，日期，评论）]）; //这将导致页面重载，而params复位
            this.getRegressionStatus（区，分公司，日期，评论）;
        }
}
 

app.component.ts （根组件）

  @Component（{
    选择：应用程序，
    模板：`
    ＆LT; D​​IV CLASS =包装＆GT;
        ＆LT;＆导航栏中GT;＆LT; /导航栏＆GT;
        ＆LT; D​​IV CLASS =内容包装容器流体＆GT;
           ＆LT; D​​IV CLASS =行＆GT;
           ＆LT; D​​IV CLASS =COL-MD-12＆GT;
            ＆LT; D​​IV CLASS =警戒警报的危险角色=警戒[隐藏] =showError！＆GT; {{错误}}＆LT; / DIV＆GT;
            ＆LT;路由器出口＆GT;＆LT; /路由器出口＆GT;
           ＆LT; / DIV＆GT;
           ＆LT; / DIV＆GT;        ＆LT; / DIV＆GT;
       ＆LT;应用躯＆GT;＆LT; /应用躯＆GT;
    ＆LT; / DIV＆GT;
    `
    指令：[导航栏，侧边栏，页脚，ROUTER_DIRECTIVES]
    供应商：[DataService的，EventService]
}）@RouteConfig（[
    {
        路径：'/状态'，
        名称：'家'，
        成分：StatusTable，
        useAsDefault：真
    }，{
        路径：'/平台，
        名称：'平台'，
        成分：PlatformResult
    }，{
        路径：/ **，
        名称：其他，
        redirectTo：['家']
    }]）出口类AppComponent {}
 

main.ts

 让eventService =新EventService（）;
引导（AppComponent，[HTTP_PROVIDERS，ROUTER_PROVIDERS，提供（LocationStrategy，{
        useClass：PathLocationStrategy
    }），
    提供（EventService，{
        useValue：eventService
    }）
]）;
 

解决方案

用于 routerCanReuse 和 routerOnReuse

  routerCanReuse（NEXT：ComponentInstruction，preV：ComponentInstruction）{返回true; }routerOnReuse（NEXT：ComponentInstruction，preV：ComponentInstruction）{
    尝试{
        this.regrArea = next.params ['区域'];
        this.regrDate = next.params ['日期'];
        this.branch = next.params ['分支'];
        this.showComments = JSON.parse（next.params ['意见']）;
    }赶上（E）{
        this.showComments = FALSE;
    }
}
 

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

解决方案

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;
    }
}

这篇关于在子组件设置路线PARAMS重新加载页面并重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！