![](/img/trans.png)
[英]How do you update state in parent component from a child component when an event takes place in the parent component
[英]How do I update state object when an event is emitted from an outside component using ngrx with Angular 6?
我有一个带“保存”按钮的页脚组件,该组件在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
对象从“常规信息”组件添加到页脚组件中?
谢谢!
我认为您的页脚不应保存保存逻辑,因为它只是多个操作的唯一触发器。
我建议您将“保存”按钮单击事件传播到表单所在的位置。
如果表单是直接父级或同级,则可以使用@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
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.