Question

我正在做一个有角项目，其中有一个服务（reports.service.ts），该服务已作为提供者添加到app.module.ts中。

此服务后来在许多组件和这些组件中使用，并在用户执行操作时修改该服务中的变量。

稍后，我想在用户注销时将这些服务变量重置为null（并希望在整个应用程序/其他组件中反映出来）。

这就是我所做的：

logout() {
    delete localStorage[AppConfig.USER_INFO_KEY];
    delete localStorage['CURRENT_BOT'];
    delete localStorage['DATE_OBJ'];
    this.Service.savedData = {};
    this.Service.dateObj = {};
    this.Service.token = '';
    this.Service.deleteMsg = '';
    this.router.navigate(['/login']);
}

问题是，当我像以前一样重置这些变量时，只会重置此logout()函数所在模块内的变量。

P.S。我没有在其他组件中单独提供reports.service.ts，只是在app.module.ts中添加了它。

Answer 1

奇怪。理想情况下，如果服务是在根模块中提供的，则将其作为依赖项注入的所有位置都共享该服务的同一实例。因此，如果对服务进行任何更改，则理想情况下应将其反映在所有这些组件中。

除非您在names(mt_list)[sapply(mt_list, function(x) 4 %in% x$gear)] #[1] "4" "6"中拥有此服务，然后还具有延迟加载的功能模块。在这种情况下，每个“延迟加载”模块都将收到此服务的不同实例。

这就是为什么Angular condemns providing Services in the Shared Module：

为什么？导入该共享模块的延迟加载的功能模块将创建其自己的服务副本，并且可能会产生不良结果。

FIX：

Angular Style Guide recommends，用于在private ArrayList<Course> populateList() { ArrayList<Course> list = new ArrayList<>(); for (int i = 0; i < 5; i++) { Course course = new Course(); list.add(course); } return list; }中提供的所有具有状态数据的服务。然后应将SharedModule注入CoreModule中。

不要将实例实例在CoreModule中的整个应用程序中共享（例如ExceptionService和LoggerService）。

此外，您应该仅在CoreModule中导入AppModule

那样，在您的App中到处都是这些服务的一个实例（当然，除非您在组件中提供服务）。

因此，如果您尚未创建CoreModule，则应考虑创建它们并开始移动所有这些服务，为此，您需要将一个应用程序范围内的实例移至AppModule中。

另外，请考虑实现import guard，以便在尝试将CoreModule导入除CoreModule以外的任何模块中时引发错误。

Answer 2

为了删除/删除本地存储项目，正确的方法是removeItem(key)。您的代码应如下所示。

logout() {
    localStorage.removeItem(AppConfig.USER_INFO_KEY);
    localStorage.removeItem(CURRENT_BOT);
    localStorage.removeItem(DATE_OBJ);
    this.Service.savedData = {};
    this.Service.dateObj = {};
    this.Service.token = '';
    this.Service.deleteMsg = '';
    this.router.navigate(['/login']);
}

如果您使用的是angular 6+，则您的服务（reports.service.ts）文件应具有

@Injectable({
  providedIn: 'root',
})

要注入ReportService，必须将ReportService类型的私有reportService参数添加到构造函数，如下所示。

constructor(private reportService: ReportService) { }

Angular：注销时销毁服务变量

2 个答案: