Question

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

请考虑提升becoz，这将有助于获得答案。

// 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

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

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

// none of these work:
fun String.beg = String::startsWith
fun String.beg = this::startsWith
val String.beg: (CharSequence, Boolean) -> Boolean = String::startsWith

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

当然，如果有几个RouteReuseStrategy个实例，它们将共享该状态。如果这不是理想的行为，那么应该再使用@Component( ... template: `{{ state.bar }}` ) class FooComponent { constructor(public state: FooState) {} }。

此外，像ngrx这样的州管理库可以更有效地管理状态。

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

2 个答案: