angular - 类型 'MemoizedSelector' 的参数不可分配给类型 'string' 的参数

Question

我正在使用 @ngrx/store 中的 createSelector 从我的商店中选择一组对象。

我的应用程序可以编译，但是我收到错误

Argument of type 'MemoizedSelector<ICommonAppState, IMenuItemsObject[]>' is not assignable to parameter of type 'string'.

navigation.selectors.ts

import { createSelector } from '@ngrx/store';
import { REDUCER_KEY } from './navigation.constants';
import { ICommonAppState } from './../../app.state';
import { INavigationState } from './navigation.reducer';

const getStore = (state: ICommonAppState) => state[REDUCER_KEY];

export const navigationItems = createSelector(getStore, (state: INavigationState) => state.items);

navigation.component.ts

import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { Component, OnInit } from '@angular/core';
import { INavigationState, IMenuItemsObject } from '../store/navigation/navigation.reducer';
import { FetchNavigationItems } from './../store/navigation/navigation.actions';
import { navigationItems } from '../store/navigation/navigation.selectors';

@Component({
  selector: 'app-navigation-component',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss'],
})
export class NavigationComponent implements OnInit {
  public navigation$: Observable<IMenuItemsObject[]>;

  constructor(private store: Store<INavigationState>) {}

  ngOnInit() {
    this.store.dispatch(new FetchNavigationItems());
    this.navigation$ = this.store.select(navigationItems);
  }
}

正是这一行被高亮显示为错误this.navigation$ = this.store.select(navigationItems);

navigation.effects.ts

  @Effect()
  fetchNavigationItems: Observable<Action> = this.actions$
    .ofType<ActionWithPayload>(FETCH_NAVIGATION_ITEMS)
    .pipe(
      mergeMap(() => this.navigationService.get()),
      switchMap(navigation =>
        of({
          type: FETCH_NAVIGATION_ITEMS_SUCCESS,
          payload: navigation,
        })
      )
    );

最后是我的 navigation.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IMenuItemsObject } from '../../../store/navigation/navigation.reducer';

@Injectable()
export default class NavigationService {
  constructor(private http: HttpClient) {}

  get = () => this.http.get<INavMenuItems>('{api:navigation}');
}

export interface INavMenuItems {
  header: {
    items: IMenuItemsObject[];
  };
}

我正在使用以下版本...

  "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@ngrx/effects": "^6.0.1",
    "@ngrx/store": "^6.0.1",
    "bulma": "^0.7.1",
    "core-js": "^2.5.4",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.10",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"

编辑这些是我也在使用的界面

export interface IMenuItemsObject {
  key: string;
  className: string;
  type: string;
  order: number;
  showInMenu: boolean;
  showAsIcon: boolean;
  openInNewWindow: boolean;
  menuItemText?: string;
  url?: string;
  displayStyle?: string;
  children: IMenuChildren[];
}

export interface IMenuChildren {
  key: string;
  className: string;
  type: string;
  order: number;
  url: string;
  showInMenu: boolean;
  showAsIcon: boolean;
  openInNewWindow: boolean;
  displayStyle?: string;
  menuItemText?: string;
}

Answer 1

解决了。我将错误的接口(interface)传递给组件构造函数。

这应该是 constructor(private store: Store<ICommonAppState>) {}当我的选择器从公共(public)应用程序状态中选择，然后隔离 INavigationState