angular - 防止在不使用 RouteReuseStrategy 的情况下破坏路由上的组件状态

Question

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

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

//应用程序.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 中。

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