Angular:当用户从一个模块移动到另一个模块时，如何移除localstorage

Question

在我的angular应用程序中有几个模块。索赔模块是其中一个模块，在索赔模块的一个组件中，我必须使用各种搜索选项来过滤索赔。当用户移动到其他索赔组件时，要求持久化选中的搜索选项。但棘手的部分是，一旦用户移动到另一个模块，这些搜索选项应该清除。通常，我可以简单地将搜索选项放到localstorage中。但是localstorage将跨模块保存数据。因此，即使用户移动到另一个模块并返回索赔模块，搜索选项仍将在本地存储中。所以我的问题是，是否有一种方法，我可以清除保存在本地存储的搜索选项，一旦用户从索赔模块移动到另一个模块。

Answer 1

您可以在您的索赔组件中注入Router并订阅事件。这样，您可以检查新路由是否不是claim模块的一部分，并清除本地存储:

constructor(private router: Router) {}
ngOnInit() {
this.router.events
.pipe(
filter((e) => e instanceof NavigationEnd && !e.url.startsWith('claim')),
first()
)
.subscribe(() => {
localStorage.removeItem('claims');
});
}

Answer 2

试图传递数据通过׳路线׳:

{path : 'heroes', component : HeroDetailComponent, data : {clearLocal : true}}

然后你可以监听数据并移除类——例如在app-component

中