Question

我正在使用Angular 2和Ngrx以及Angular Material。是否所有UI更改（如下拉列表或对话框）都应存储在其中？

例如：

<button md-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu">
  <button md-menu-item>Item 1</button>
  <button md-menu-item>Item 2</button>
</md-menu>

我应该支持商店中的下拉菜单吗？

下一个例子：

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav">
    Jolly good!
  </md-sidenav>

  <div class="example-sidenav-content">
    <button type="button" md-button (click)="sidenav.open()">
      Open sidenav
    </button>
  </div>

</md-sidenav-container>

我可以使用open方法吗？也许我应该在组件中创建包含sidenav的组件，该组件仅在输入Input() open;上运行？

Answer 1

对我来说，我一般有3个问题。

UI更改是否与组件隔离，不会影响其他组件？
当视图返回到之后，是否需要保留UI更改？
出于调试目的，您是否要跟踪此状态（可能是为了重新创建最终用户的视图？）

如果您对这3个问题的回答为“否”，那么您可能不需要将该组件的状态放入商店。

通过不联系商店，你可以使它更模块化，更容易测试和重复使用。

Answer 2

您应该使用商店来保持状态，并且UI应该绑定到该状态。然后，您可以将Observable保留到该状态层次结构或订阅这些状态更改并相应地动态更新UI。

这就是我的想法：

import {  Component } from "@angular/core";
    import { Store } from "@ngrx/store";
    // Other relevant imports ....



@Component({
  selector: 'some-comp',
  templateUrl: 'some-comp.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class SomeComponent implements OnDestroy {

employeeObs$:Observable<EmployeeInfo>;

constructor( private store: Store<IAppState>) {
this.employeeObs$ = this.store.select('employee')
.map((next: IEmployeeState) => next.info);
}

// ...
}

然后在html模板上的内容如下：

<!-- Some other regular DOM 
...
...

-->

<!-- Conditional DOM based on state -->
<div *ngIf="employeeObs$ | async as employeeInfo">
    <div type="text">{{employeeInfo.name}}</div>
</div>

<!-- Some other regular DOM 
...
...

-->

条件标签仅显示Observable是否有数据......

Ngrx商店 - 是否应该存储所有UI更改？

2 个答案: