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

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));
}

这样可以很好地加载产品，我可以在视图中看到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将Product对象从"General Info"组件中获取到页脚组件中？

谢谢！

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
});