javascript - 当使用 ngrx 和 Angular 6 从外部组件发出事件时，如何更新状态对象？

Question

我有一个带有“保存”按钮的页脚组件，该按钮在我的 Angular 6 应用程序中始终可见 - 它是一个核心组件，除非应用程序被销毁，否则永远不会销毁。应用程序的每个页面都是保存产品的不同部分，例如“一般信息”部分、“定价”部分、“数量”部分等。当我继续使用我的应用程序时，如果我随时单击“保存”按钮，它应该保存 Product 对象的当前状态。

我有一个 Product 对象，如下所示:

export interface Product {
    id: number;
    name: string;
    price: number;
    qty: number;
}

我的“一般信息”功能页面如下所示:

constructor(private store: Store<fromProduct.State>) {}

ngOnInit() {
    this.store.dispatch(new LoadAction());
    this.product$ = this.store.pipe(select(fromProducts.getProduct));
}

这很好地加载了产品，我在 View 中看到了可观察到的 product$ 的所有值。但是，我不知道如何将加载的产品对象“传递”到页脚组件以保存状态。

我的页脚组件如下所示:

// Markup
<button (click)="saveProduct($event)">Save</button>

// Component
import * as productActions from '../../product/state/actions';

...

saveProduct(product: Product) {
    this.store.dispatch(new productActions.SaveProductAction(product));
}

我知道 $event 与任何内容无关 - 这就是我的问题。如何通过 ngrx 将“General Info”组件中的 Product 对象获取到页脚组件中？

谢谢!

Answer 1

我认为您的页脚不应该包含保存逻辑，因为它只是多个操作的唯一触发器。

我建议您将“保存”按钮单击事件传播到表单所在的位置。

如果表单是直接父级或同级，那么您可以简单地使用 @Input() 和 @Output() 来完成，如果不是，那么您可以使用服务在表单和按钮之间共享 Observable，如下所示:

@Injectable()
export class EventService{

  private subject= new Subject<any>();

  saveButtonClicked = this.subject.asObservable();

  constructor() { }

  saveButtonClick() {
    this.subject.next();
  }
}

页脚模板:

<button (click)="onSaveClick()">Save</button>

页脚 typescript :

onSaveClick() {
   this.eventService.saveButtonClick();
}

您的不同形式:

this.eventService.saveButtonClicked.subscribe(res => {
   // Your save logic
});