时间戳

首页 > 解决方案 > 如何确保在路由更改后注入相同的 Angular Service 实例以使服务有状态？

angular - 如何确保在路由更改后注入相同的 Angular Service 实例以使服务有状态？

问题描述

每当更改路线时，我的 Angular 服务都会被重建并且我会丢失数据。如何将单个实例注入到我的所有组件中，以便即使在路由更改后服务也可以是有状态的？

我已经检查了该服务仅在其他地方提供，@NgModule在其他地方没有，所以我不确定在哪里可以检查。

@NgModule({
  imports: [BrowserModule, FormsModule, AppRoutingModule],
  declarations: [AppComponent, HeaderComponent, HomeComponent, MarketComponent],
  bootstrap: [AppComponent],
  providers: [DataService]
})
export class AppModule {}


@Injectable()
export class DataService {
  content: string = 'Intial Value';

  constructor() {
    console.log('DataService::constructor()');
  }
}

另一方面，如果使用该服务作为有状态数据管理器不是正确的方法，您能否告知预期的方法是什么？

参考：https ://stackblitz.com/edit/angular-ivy-hy96b7?file=src%2Fapp%2Fapp.module.ts

标签： angular

解决方案

我已经检查了代码，您应该进行两项改进：

  1. 而不是使用href使用角度路由器路由到正确的路径，添加带有不正确路径的href正在重新加载应用程序，将其添加到Header html：
<div>DataService.content = {{dataService.content}}</div>
<nav>
  <ul>
    <li><a [routerLink]="['/home']">Home</a></li>
    <li><a [routerLink]="['/market']">Market</a></li>
  </ul>
</nav>
  1. 当您说服务的单个实例时，您应该将此元数据添加到服务本身（角度 6+ 起），将其添加到您的数据服务中：
@Injectable({
  providedIn: 'root',
})

这将自动创建具有单个实例的服务，并可用于维护一些状态 b/w 模块或组件。

如果使用该服务作为有状态数据管理器不是正确的方法，您能否告知预期的方法是什么？

这取决于应用程序的复杂性，通常，维护状态需要一件或多件事情来实现。在 Angular 中，您可以使用像 ngrx（最初是小复杂）、akita（简单轻量级）和许多其他状态库以及本地存储或会话存储。

服务旨在使组件和模块之间的通信更好（带有服务的小型应用程序足以管理状态），但是为许多配置保留状态并不是一个好主意，所以你可以去状态管理库。

推荐阅读