Question

我试图在我的子组件StatusTable组件中设置4个路由参数[区域，分支，日期，注释]，当我调用导航网址的函数goto()时，页面重新加载并重置为默认值。

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

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

在子组件中设置route params会重新加载页面并重置

1 个答案: