[英]Angular with Angular Material sidenav and NgRx
I'm trying to use NgRx with the angular material, to open and close the sidenav, but I'm not maintaining it.我正在尝试将 NgRx 与 angular 材料一起使用,以打开和关闭 sidenav,但我没有维护它。
My Store:我的商店:
export const sidenavFeatureKey = 'sidenav';
export interface SidenavState {
status: boolean
}
export const initialSidenavState: SidenavState = {
status: false
}
export const sidenavReducer = createReducer(
initialSidenavState,
on(toggleSideNav,
(state) => {
return {
...state,
status: !state.status
}
}
)
)
my action我的行动
export const toggleSideNav = createAction(
"[Toolbar - Sidenav] Change sidenav to true or false"
)
my header我的 header
export class HeaderComponent {
constructor(private sidenavStore: Store<SidenavState>) {
}
toggleSidenav() {
this.sidenavStore.dispatch(toggleSideNav())
}
}
<mat-toolbar absolute>
<button (click)="toggleSidenav()" mat-icon-button>
<mat-icon>menu</mat-icon>
</button>
<span>My App</span>
<span class="example-spacer"></span>
<button aria-label="Example icon-button with heart icon" class="example-icon favorite-icon" mat-icon-button>
<mat-icon>favorite</mat-icon>
</button>
<button aria-label="Example icon-button with share icon" class="example-icon" mat-icon-button>
<mat-icon>share</mat-icon>
</button>
</mat-toolbar>
and my sidenav和我的 sidenav
export class SidenavComponent implements OnInit {
sidenavStatus: boolean = true;
constructor(private sidenavStore: Store<SidenavState>) {
};
ngOnInit() {
this.sidenavStore.select("status").subscribe(
toggle => this.sidenavStatus = toggle
);
}
}
<mat-sidenav-container>
<mat-sidenav [(opened)]="sidenavStatus" mode="side">
<p>Hiding</p>
</mat-sidenav>
<mat-sidenav-content>
<p>Hello</p>
</mat-sidenav-content>
</mat-sidenav-container>
My Store status, changes from true to false when clicking on the header button, but the sidenav does not open and close.我的店铺状态,点击header按钮时由true变为false,但是sidenav没有打开和关闭。
This may be unrelatd, but you don't need two-way binding on opened
, as sidenavStatus
will be updated via your selector and the actions you emit.这可能不相关,但您不需要在
opened
上进行双向绑定,因为sidenavStatus
将通过您的选择器和您发出的操作进行更新。 You could replace [(opened)]
with [opened]
as follows:您可以将
[(opened)]
替换为[opened]
,如下所示:
sidenav.html
<mat-sidenav-container>
<mat-sidenav [opened]="sidenavStatus" mode="side">
<p>Hiding</p>
</mat-sidenav>
<mat-sidenav-content>
<p>Hello</p>
</mat-sidenav-content>
</mat-sidenav-container>
This would then guarantee that the only thing responsible for controlling the state of your sidebar is the sidenavStatus
variable in the parent component (unless of course you have logic in your mat-sidenav
component which is changing the value of opened
internally).这将保证唯一负责控制侧边栏 state 的是父组件中的
sidenavStatus
变量(当然,除非你的mat-sidenav
组件中有逻辑正在改变内部opened
的值)。
We could take this one step further and replace sidenavStatus
with an Observable
that contains only the toggle state you are interested in and then use this in the template with the async
pipe我们可以更进一步,将
sidenavStatus
替换为仅包含您感兴趣的开关 state 的Observable
,然后在模板中使用async
pipe
sidenav.ts
export class SidenavComponent implements OnInit {
sidenavStatus$: Observable<boolean>;
constructor(private sidenavStore: Store<SidenavState>) {
};
ngOnInit() {
this.sidenavStatus$ = this.sidenavStore.select("status");
}
}
sidenav.html
<mat-sidenav-container>
<mat-sidenav [opened]="sidenavStatus$ | async" mode="side">
<p>Hiding</p>
</mat-sidenav>
<mat-sidenav-content>
<p>Hello</p>
</mat-sidenav-content>
</mat-sidenav-container>
Now, whatever value resides in the store for the selector "status"
will be fed directly into your child component.现在,存储在选择器
"status"
中的任何值都将直接馈送到您的子组件中。 If it still doesn't work, you can then at least rule out the store implementation as the source of the issue如果它仍然不起作用,那么您至少可以排除商店实施是问题的根源
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.