Angular 4路由器将组件添加到routerLink导航上，而不是销毁它们

问题描述

当从子模块中从子路径导航到另一个兄弟子路径时，路由器会销毁新组件，而不会破坏前一个组件，而是将新组件追加在导航中.

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

这是导航发生的事情:

推荐答案

我遇到了同样的问题.我发现，当我创建新组件时，它将引发异常，那么我的旧组件没有被销毁.

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导航上，而不是销毁它们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！