简体   繁体   English

使用ngrx时如何重新初始化Angular中的组件或整个应用程序?

[英]How Do I reinitialize components or entire app in Angular when using ngrx?

I have a User State that contains their current language.我有一个包含他们当前语言的用户 State。 On click of a dropdown, the language is updated and the user state language is updated.单击下拉菜单时,语言会更新,用户 state 语言也会更新。 The parent components (pages) contain the language logic, we have an Observable that is set by calling a userStore selector.父组件(页面)包含语言逻辑,我们有一个通过调用 userStore 选择器设置的 Observable。 Now, all store actions are dispatched in ngOnInit of the corresponding components.现在,所有存储操作都在相应组件的 ngOnInit 中调度。 I can see the data being updated on language change;我可以看到随着语言变化而更新的数据; however, I want to dispatch an action on language change.但是,我想发送一个关于语言更改的操作。 How do I do this?我该怎么做呢?

I am setting language like this:我正在设置这样的语言:

    this.language$ = this.userStore.pipe(
  select(fromUser.getUserPreferredLanguage),
  map(lang => {
    return isNullOrEmpty(lang) ? "en" : lang;
  })
);

and I want to do something like我想做类似的事情

OnLanguageChange(){this.store.dispatch(action)}

And have that cascade down to the child components - so they reinitalize too并将其级联到子组件-因此它们也重新初始化

I'm not sure if I understood your architecture and what you want to achieve.我不确定我是否了解您的架构以及您想要实现的目标。 But if you want to call a method every time your language observable fires, you could use the tap operator ( https://rxjs-dev.firebaseapp.com/api/operators/tap ):但是如果你想在每次你的language observable触发时调用一个方法,你可以使用tap运算符( https://rxjs-dev.firebaseapp.com/api/operators/tap ):

this.language$ = this.userStore.pipe(
  select(fromUser.getUserPreferredLanguage),
  map(lang => {
   return isNullOrEmpty(lang) ? "en" : lang;
  }),
  tap(lang => this.OnLanguageChange(lang))
);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在Angular 6中使用ngrx从外部组件发出事件时,如何更新状态对象? - How do I update state object when an event is emitted from an outside component using ngrx with Angular 6? 如何使用 ngrx 过滤有角度的材料表? - How do I filter an angular material table using ngrx? 如何使用 Angular 9 和 NGRX 获取子组件中的数据? - How to get data in Child Components using Angular 9 and NGRX? 如何使用ngrx redux和angular2从简单对象显示属性 - How do I display a property from a simple object using ngrx redux and angular2 在 Angular 中使用 ngrx 后,如何从可观察对象中提取单个值 14 - how do I extract a single value from an observable after using ngrx in Angular 14 NGRX - 如何在 angular 防护中访问我的应用程序 state? - NGRX - How can I access my app state in angular guard? 如何在 StoryBook 和 Angular 测试中设置 NGRX 商店的 State? - How do I Set the State of NGRX Store in StoryBook & Angular tests? 如何将Angular2路由器连接到ngrx / store? - How do I connect Angular2 router to ngrx/store? 如何使用 Angular 并排获取组件? - How do I get the components side by side using Angular? 当某些组件从服务器请求相同的数据时,如何使用 angular、ngrx 和 redux 存储和操作数据? - How to store and manipulate data with angular, ngrx and redux when some components request same data from server?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM