防止在路由上破坏组件状态，而不使用 RouteReuseStrategy

Question

我研究了这个主题，发现RouterReuseStrategy是一个解决方案，但我不能使用RouterReuse如何在不使用RouterReuse解决方案的情况下防止破坏组件状态

请考虑投票，因为这将有助于获得答案。

// app.module.ts

const appRoutes: Routes = [
  { path: 'registration', component: RegistrationComponent },
  { path: 'users', component: ListComponent },
  { path: '', component: HomeComponent },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    Capitalize,
    FilterPipe,
    ListComponent,
    RegistrationComponent,
    PageNotFoundComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.html

<section class="container">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div>    
        <a class="navbar-brand" routerLink="/">Brand</a>
      </div>  
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a routerLink="/">Home</a></li>
          <li><a routerLink="/registration">Registration</a></li>
          <li><a routerLink="/users">Users</a></li>                    
        </ul>        
      </div>
    </div>
  </nav>
</section>
<router-outlet></router-outlet>

stackblitzLink

Answer 1

您可以将状态存储在在路由上未重新创建的级别上提供的服务中，例如在 AppModule 或 AppComponent 中。

此外，如果仅导航仅更改路线参数，但保持在同一路线上，则不会重新创建组件，因此您不会丢失状态。但这仅适用于特定用例。

Answer 2

保留路由组件状态是RouteReuseStrategy 应该解决的几个问题之一。

另一种方法是将状态保留在组件实例之外，即在单独的提供者中。开发人员可以控制该提供者属于哪个注入器，从而决定何时销毁提供者实例。

@Component(
  ...
  template: `{{ state.bar }}`
)
class FooComponent {
  constructor(public state: FooState) {}
}

如果在父组件中定义了状态提供者，当父组件被销毁时，它将被销毁。如果它被定义为模块提供者，它根本不会被销毁。

当然，如果有多个FooComponent 实例，它们将共享状态。如果这又不是可取的行为，那么应该使用RouteReuseStrategy。

此外，ngrx 等状态管理库允许更有效地管理状态。