使用NGXS在单个组件中的多个存储

时间:2018-08-09 04:32:32

标签: ngxs

使用以下设置的ngxs

user.state.ts

export class UserState { ... }

product.state.ts

export class ProductState { ... }

App.component.ts

import {UserState} from './user.state'
import {ProductState} from './product.state'


export class App{

  /***      
        I am not sure but like ngrx we can't say,
        private userStore:Store<UserState>    <============ can we do it in constructor like it
  ***/


  @Select(UserState.getUsers) Users$: Observable<IUsers[]>;             // This works
  @Select(ProductState.getProducts) Products$: Observable<IProducts[]>; // This works

  constructor(private store : Store) {}  //<==== Can we have Store<UserState> or Store<ProductState>

  ngOnInit(){

     /***
          Below In 1 Case : when I type this.store.select(state => state.
          after .(dot) it doesn't resolve to .Users(Case 1) or .Products(Case 2)

          Question: So how can I use two different states for below cases????????????             
     ***/

   // 1 Case) 

           this.store.select(state => state.Users.Users).subscribe((users: IUsers[]) => {
                this.users = users;
           })

   // 2 Case) 

           this.store.select(state => state.Products.Products).subscribe((products: IProducts[]) => {
                this.products = products;
           })

  }
}

使用NGXS有什么优雅的方法吗??

1 个答案:

答案 0 :(得分:2)

我认为这可能对您有帮助

// Keep this as it is

@Select(UserState.getUsers) Users$: Observable<IUsers[]>;             
@Select(ProductState.getProducts) Products$: Observable<IProducts[]>; 

// And then use it like this

this.Users$.subscribe((users: IUsers[]) => {
    this.users = users;
})

this.Products$.subscribe.((products: IProducts[]) => {
    this.products = products;
})