Question

设置

在app.routing.ts中定义的延迟加载的应用路由示例代码段：

{
    path: 'contacts',
    children: [{
        path: '',
        loadChildren:'./modules/contacts/contacts.module#ContactsModule'
    }, {
        path: 'contact_type_1',
        loadChildren: './modules/contact-types/type_1/type_1.module#Type1Module',
        canActivate: [AuthGuard]
    }]
}

我有联系人列表。点击后，我将contact_type和contact_id传递给以下路由：this.router.navigate(['contacts/' + contact_type], { queryParams: { id: contact_id }}); 这会为每个contact_type加载相应的组件，并使用传递的contact_id从服务器获取联系人数据。

在contact_type路由中添加了ContactGuard类，该路由调用canActivate（）来检查用户是否与他/她的帐户中添加的contact_id有联系。如果没有导航到联系人列表页面。

到目前为止工作正常。

现在点击后退按钮将我带到联系人列表页面：routerLink="/contacts"

发生了什么

这里，导航正确，也调用了contact_type组件的ngOnDestroy()。但contact_type组件完全重新加载在联系人列表页面上。

预期行为

在导航回联系人列表页面时，不应重新加载contact_type组件。只能调用联系人列表页面的组件。

Angular版本：5.2.9

Answer 1

通过取消订阅queryParams()

中的ngOnDestroy()来解决此问题

问题是：当组件被销毁时，用于从URL获取contact_id的queryParam()订阅没有取消订阅。因此，在路由更改时，再次调用订阅。

导航离开页面后，Angular Component重新加载

1 个答案: