1

我无法访问使用 angular 的 redux 存储属性。

我在 IApp 中有两个属性，第一个是接口，第二个是数字。

interface AppStoreInterface {
  layoutInterface: LayoutInterface,
  numero: number
}

我可以毫无问题地访问该号码，但是当我尝试访问 layoutInterface 时没有任何事情发生。

这是模块：

export class AppModule {

  constructor(
    ngRedux: NgRedux<AppStoreInterface>,
    public devTools: DevToolsExtension
  ) {

    const storeEnhancers = devTools.isEnabled() ? [devTools.enhancer()] : [];

    ngRedux.configureStore(
      rootReducer,
      INITIAL_STATE,
      [],
      storeEnhancers
    );
  }
}

这是组件：

export class MainLayoutComponent implements OnInit {

  @select(['layoutInterface', 'sidebarStatus']) sidebarStatus$: boolean;
  @select('numero') test$ :number;

constructor(
    public translate: TranslateService,
    public dialog: MdDialog,
    private ngRedux: NgRedux<AppStoreInterface>,
    private actions: LayoutActions
  ) {
    const browserLang: string = translate.getBrowserLang();
    translate.use(browserLang.match(/en|es/) ? browserLang : 'en');

    this.siteStyle = "app";
    this.boxed = "";
    this.align = "start";
    this.currentLang = "en";
    this.showSettings = false;
    this.showLeftButtton = false;
    this.userLoggedIn = false;

    //this.store = this.getStoreService();
    //this.layoutInterface = this.getLayoutInterface();
  }
}

我究竟做错了什么？

4

1 回答 1

1

当您使用时，@select您不会从存储中获取值，而是从该值中获取Observable值。要访问该值，您需要订阅该值Observable。

@select(['layoutInterface', 'sidebarStatus']) sidebarStatus$: Observable<boolean>;
                                                              ^^^^^^^^^^^^^^^^^^^^
@select('numero') test$: Observable<number>;
                         ^^^^^^^^^^^^^^^^^^^

您可以使用async管道直接在组件的模板 (html) 中访问它。

<span *ngIf="sidebarStatus$ | async">Sidebar</span>

或者您可以在组件的类中显式订阅它，例如将值分配给另一个字段，例如sidebarStatus: boolean;：

ngOnInit() {
  this.sidebarStatus$.subscribe(sidebarStatus => this.sidebarStatus);
}
于 2018-03-09T20:57:25.880 回答