Question

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

TL; DR：我可以使用async从组件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

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

的ngrx platform-master获得更好的示例

 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);

Angular - 在Ngrx存储中访问数据元素

1 个答案: