在子组件设置路线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,ValuesPipe]
指令:[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({
选择:应用程序,
模板:`
< DIV CLASS =包装>
<&导航栏中GT;< /导航栏>
< DIV CLASS =内容包装容器流体>
< DIV CLASS =行>
< DIV CLASS =COL-MD-12>
< DIV CLASS =警戒警报的危险角色=警戒[隐藏] =showError!> {{错误}}< / DIV>
<路由器出口>< /路由器出口>
< / DIV>
< / DIV> < / DIV>
<应用躯>< /应用躯>
< / DIV>
`
指令:[导航栏,侧边栏,页脚,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屋!