Angular - 在Ngrx商店中访问数据元素

Question

现在我可以访问状态数据，但我只能通过异步提取状态中的特定数据成员。我是一名Angular和Ngrx初学者（尽管我已经使用了React/Redux），并且希望有人能指出可能是一个明显的解决方案。我研究了这个问题，并且看到人们将状态中的某些数据元素用选择器作为可能的解决方案。但是，由于我已经有组件类中的状态，所以我觉得可能有一个简单的单线程来访问数据，而且我的ES6 /前端天真不会妨碍使用。在'/ **'前面的组件类中有两个注释，我一直试图访问这些数据。

TL; DR：我可以使用异步访问组件HTML中我想要从我的Ngrx存储中获取的数据元素，但我不知道如何访问组件类中的相同数据元素。

组件类：

interface AppState{ 
    view: Object 
} 

@Component({ 
    selector: 'app-content', 
    templateUrl: './content.component.html', 
    styleUrls: ['./content.component.css'] 
}) 
export class ContentComponent implements OnInit { 
    view: Observable<Object> 
    //**I want to be able to have a reference to the viewId and viewData in this class 
    //**so I can dispatch an action using those data fields 

    constructor(private store: Store<AppState>){ 
    this.view = store.select('view'); 
    } 

    ngOnInit() { 
    } 
} 

组件的HTML

<div *ngIf="view | async as v" style="color:black">{{v.viewId}}</div> 

减速机：

import { ActionReducer, Action } from '@ngrx/store'; 
import * as viewIds from './view.ids'; 
import * as actionTypes from './view.actions'; 

const defaultState = { 
    viewId: viewIds.DEFAULT, 
    viewData: {} 
} 

const newState = (state, newData) => { 
    return Object.assign({}, state, newData) 
} 

export function viewReducer(state: Object = defaultState, action: Action) { 
    const data = action.payload; 
    switch (action.type) { 
     case actionTypes.UPDATE_VIEW: 
      return newState(state, { viewId: data.viewId, viewData: data.viewData }) 

     case actionTypes.DO_NOTHING: 
      console.log("Do nothing!") 
      return state; 

     default: 
      return state; 
    } 
} 

Answer 1

您可以订阅您的商店并从中获取数据，但不要忘记在组件销毁时取消订阅。异步在后台执行此操作，这里有两种方法可以从商店中检索数据。您可以在github's ngrx example app

this.store.select(fromCore.getView).take(1) 
    .subscribe(view=> { 
    this.viewData= view; 
    }); 

///////meth two /////////// 
this.view$ = store.store.select(fromCore.getView); 
this.view$.map(view=> { 
    this.viewData= view; 
}).take(1);