Question

我目前正在使用Angular 2和ngrx进行我的第一步，我有点被阻止......我想在sidenav元素上管理open属性的状态，特别是Angular Material的mat-sidenav。现在，我想观察（选择）状态，我用true初始化它但在mat-sidenav ngOnInit上发生错误。也许，有人看到我想念的东西......

src / app / docs / docs.component.ts（21,43）中的错误：错误TS2345：参数 “打开”类型'不能分配给“sidenav”'类型的参数。

TS组件代码

export class DocsComponent implements OnInit{
  sidenavState: Observable<{opened: boolean}>;
  @ViewChild('snav') public myNav: MatSidenav;


  constructor(private store: Store<{sidenav: {opened: boolean}}>){}

  ngOnInit(){
    this.sidenavState = this.store.select('opened'); // <--- Error Line
  }



  fillerNav = Array(50).fill(0).map((_, i) => `Nav Item ${i + 1}`);

  fillerContent = Array(50).fill(0).map(() =>
    `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
       labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
       laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
       voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
       cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`);
}

HTML CODE

<mat-sidenav-container>
  <mat-sidenav mode="side" style="min-width:250px;" [opened]="(sidenavState | async).opened" #snav fixedTopGap="56">
    <mat-nav-list>
      <a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <p *ngFor="let content of fillerContent">{{content}}</p>
  </mat-sidenav-content>
</mat-sidenav-container>

TS Reducer Code

import * as SidenavActions from './sidenav.actions';
import { Action } from "@ngrx/store";

const initialState = {
    opened: true
};

export function sidenavReducer(state = initialState, action: SidenavActions.SidenavActions) {
    switch (action.type) {
        case SidenavActions.TOGGLE:
            return {
                ...state,
                opened: (state.opened ? false : true)
            }
        default:
            return state;
    }
}

TS行动守则

import { Action } from '@ngrx/store';

export const TOGGLE = 'TOGGLE';

export class Toggle implements Action {
    readonly type = TOGGLE;
}

export type SidenavActions = Toggle;

TS主模块

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    FlexLayoutModule,

    CoreModule,
    DocsModule,
    MyMaterialModule,
    AppRoutingModule,

    StoreModule.forRoot({sidenav: sidenavReducer})
  ],
  bootstrap: [AppComponent]
})

package.json依赖项

"@angular/animations": "^5.2.4",
    "@angular/cdk": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/flex-layout": "^2.0.0-beta.12",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@ngrx/store": "^5.1.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"

Answer 1

this.sidenavState = this.store.select（'sidenav'，'open'）; //这会起作用

选择ngrx时出错

1 个答案: