Angular 4 路由器在 routerLink 导航上附加组件而不是销毁它们 [英] Angular 4 router is appending components on routerLink navigation instead of destroying them
问题描述
当从子模块内从一个子路由导航到另一个同级子路由时,路由器不会破坏前一个组件,而是在向前和向后导航时附加新的组件.
When navigating from within a submodule from a child route to another sibling child route, instead of the router destroying the previous component, it appends the new one on navigation forward and backward.
为什么会这样?
从/#/subscriber/lookup
开始,移动到/#/subscriber/register
路线
<a [routerLink]="['../register']">Subscriber register link</a>
app.routes.ts
app.routes.ts
/**
* Angular 2 decorators and services
*/
import { Routes } from '@angular/router';
/**
* Other services
*/
import { RouteProtection } from '../services/route-protection.service';
// import { DataResolver } from './app.resolver';
/**
* Imported Components
*/
import { LoginComponent } from '../login/login.component';
import { NotFound404Component } from '../404/notfound404.component';
export const ROUTES: Routes = [{
path: '',
redirectTo: 'subscriber',
pathMatch: 'full',
}, {
path: 'subscriber',
loadChildren: '../+subscriber/subscriber.module#SubscriberModule',
// canActivate: [RouteProtection]
}, {
path: 'detail',
loadChildren: '../+detail/detail.module#DetailModule',
canActivate: [RouteProtection]
}, {
path: 'login',
component: LoginComponent
}, {
path: '**',
component: NotFound404Component
}, {
path: '404',
component: NotFound404Component
}];
// export const routing = RouterModule.forRoot(ROUTES, { useHash: true});
subscriber.routes.ts
subscriber.routes.ts
/**
* Imported Components
*/
import { SubscriberLookupComponent } from './lookup/subscriber-lookup.component';
import { SubscriberRegisterComponent } from './register/subscriber-register.component';
/*
* Shared Utilities & Other Services
*/
// import { RouteProtection } from '../services/route-protection.service';
// import { DataResolver } from '../services/app.resolver';
export const subscriberRoutes = [{
path: '',
children: [{
path: '',
pathMatch: 'full',
redirectTo: 'lookup'
}, {
path: 'lookup',
component: SubscriberLookupComponent, //canActivate: [RouteProtection],
}, {
path: 'register',
component: SubscriberRegisterComponent, //canActivate: [RouteProtection], // resolve: { 'dataBroughtToComponent': DataResolver }
}]
},];
app.module.ts
app.module.ts
/**
* `AppModule` is the main entry point into Angular2's bootstraping process
*/
@NgModule({
bootstrap: [AppComponent],
declarations: [ // declarations contains: components, directives and pipes
// Components
AppComponent, LoginComponent, NotFound404Component, // Directives
NavSidebarComponent, NavHeaderComponent, NavFooterComponent
// Pipes
],
imports: [ // import other modules
BrowserModule, SharedModule, BrowserAnimationsModule, RouterModule.forRoot(ROUTES, {useHash: true}), NgbModule.forRoot()
/* ApplicationInsightsModule.forRoot({
instrumentationKey: '116b16e7-0307-4d62-b201-db3ea88a32c7'
})*/
],
providers: [ // expose our Services and Providers into Angular's dependency injection
ENV_PROVIDERS, APP_PROVIDERS, AUTH_PROVIDERS]
})
subscriber.module.ts
subscriber.module.ts
@NgModule({
imports: [
SharedModule,
CommonModule,
RouterModule.forChild(subscriberRoutes)
],
declarations: [ // Components / Directives / Pipes
SubscriberLookupComponent,
SubscriberRegisterComponent
],
// exports: [
// SharedModule,
// SubscriberLookupComponent,
// SubscriberRegisterComponent
// ]
})
这是导航时发生的事情:
This is what happens on navigation:
推荐答案
我遇到了同样的问题.我发现当我的新组件被创建时,它抛出了一个异常,然后我的旧组件没有被销毁.
I was having this same issue. I find out that when my new component was created, it throws an exception then my older component was not being destroyed.
就我而言,在模板中我有 {{model.field}}
和 TypeScript model: Model;
,但是在创建组件时,model
是 undefined
.我认为如果在创建组件时抛出任何异常,路由器无法销毁旧组件.
In my case, in the template I have {{model.field}}
and in the TypeScript model: Model;
, but when the component is created, the model
was undefined
. I think if any exception is throwed on the creation of the component, the router can't destroy the older component.
我使用 Visual Studio Code 调试器来查找异常原因.
I used the Visual Studio Code debugger to find the exception cause.
所以我只是放了一个 *ngIf
来检查模型:
So I just putted a *ngIf
to check model:
<tag *ngIf="model">
{{model.field}}
</tag>
这篇关于Angular 4 路由器在 routerLink 导航上附加组件而不是销毁它们的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!