Angular 防止在路由上破坏组件状态,而不使用RouterUseStrategy

Angular 防止在路由上破坏组件状态,而不使用RouterUseStrategy,angular,angular2-routing,angular2-services,angular-routing,Angular,Angular2 Routing,Angular2 Services,Angular Routing,我研究了这个主题,发现RouterReuseStrategy是一个解决方案,但我不能使用RouterReuse。如果不使用RouterReuse解决方案,如何防止破坏组件状态 请考虑一下投票,因为它会帮助你找到答案。 //app.module.ts const appRoutes: Routes = [ { path: 'registration', component: RegistrationComponent }, { path: 'users', component: ListC

我研究了这个主题,发现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>


您可以将状态存储在服务中,该服务是在路由时不重新创建的级别上提供的,例如在AppModule或AppComponent中


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

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

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

@Component(
  ...
  template: `{{ state.bar }}`
)
class FooComponent {
  constructor(public state: FooState) {}
}
若状态提供程序是在父组件中定义的,那个么当父组件被销毁时,它将被销毁。如果它被定义为模块提供程序,它将不会被销毁

当然,如果有多个
FooComponent
实例,它们将共享状态。如果这不是理想的行为,那么再次强调,应该使用
RouteReuseStrategy


此外,状态管理库(如允许)可以更有效地管理状态。

请您写一个答案,并提供更多详细信息。您有时间吗?我们可以通过聊天讨论这个问题吗?如果不建议切换到聊天,我不知道如何进入聊天室。请提供一些不清楚的信息。我实际上有一个代码。我使用一个服务将数据传递到两个不同的视图。但在路由上,组件状态被破坏。在修理上有困难。如果你能研究一下代码。这实际上是一个用户提交数据的表单。该数据被传递到服务,然后被传递到视图组件。我似乎找不到如何防止路由上的状态更改老实说,我不想使用RouterReuse听起来不是一个很好的理由。更新了stackblitz链接该链接不包含可用的应用程序。问题并没有说明为什么不使用RouterReuseStrategy。如果您在使用它时遇到问题,它应该说明这些问题是什么,而不是请求一种方法来避免它。正确的方法是使用RouterUseStrategy,您可以先查看本文。也。我相信我的回答回答了这个问题并解释了选项。如果你将有具体的问题来实施,考虑一个问题,解释他们,并显示你目前的尝试。谢谢详细的答案。请您通过teamviewerSO规则查看我的代码,该规则需要在问题本身中提供。考虑通过Paskor或StasBLITZ提供可行的例子。