[英]How do I update state object when an event is emitted from an outside component using ngrx with Angular 6?
I have a footer component with a "Save" button that is always visible in my Angular 6 app - it is a core component that never destroys unless the app is destroyed. 我有一个带“保存”按钮的页脚组件,该组件在Angular 6应用程序中始终可见-它是一个核心组件,除非销毁该应用程序,否则它不会销毁。 Each page of the app is a different section in saving a Product, so for example a "General Info" section, "Pricing" section, "Quantity" section, and so forth.
应用程序的每个页面都是保存产品的不同部分,例如“常规信息”部分,“定价”部分,“数量”部分等等。 When I progress through my app, if I click the Save button, at any time, it should save the current state of the Product object.
当我浏览我的应用程序时,如果我随时单击“保存”按钮,它应该保存Product对象的当前状态。
I have a Product
object that looks like this: 我有一个看起来像这样的
Product
对象:
export interface Product {
id: number;
name: string;
price: number;
qty: number;
}
My "General Info" feature page looks like this: 我的“常规信息”功能页面如下所示:
constructor(private store: Store<fromProduct.State>) {}
ngOnInit() {
this.store.dispatch(new LoadAction());
this.product$ = this.store.pipe(select(fromProducts.getProduct));
}
This loads the product just fine, I see all of the values from the product$
observable in my view. 这样就可以很好地加载产品,我可以看到
product$
可观察到的值。 However, I don't know how to "pass" the loaded product object to the footer component to save the state. 但是,我不知道如何将加载的产品对象“传递”到页脚组件以保存状态。
My footer component looks like this: 我的页脚组件如下所示:
// 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));
}
I know $event
is linked to nothing - that is what my question is. 我知道
$event
没有任何关联-这就是我的问题。 How can I get the Product
object from the "General Info" component into the footer component via ngrx
? 如何通过
ngrx
将Product
对象从“常规信息”组件添加到页脚组件中?
Thanks! 谢谢!
I think that your footer should not hold the save logic, since it's just a unique trigger for multiple actions. 我认为您的页脚不应保存保存逻辑,因为它只是多个操作的唯一触发器。
I'd advise you to propagate the Save button click event to where your forms are. 我建议您将“保存”按钮单击事件传播到表单所在的位置。
If the form is a direct parent or sibling, then you could do it simply with @Input()
and @Output()
, if it's not then you can use a service to share an Observable
between your forms and your button as follows: 如果表单是直接父级或同级,则可以使用
@Input()
和@Output()
,如果不是,则可以使用服务在表单和按钮之间共享Observable
,如下所示:
@Injectable()
export class EventService{
private subject= new Subject<any>();
saveButtonClicked = this.subject.asObservable();
constructor() { }
saveButtonClick() {
this.subject.next();
}
}
Footer template: 页脚模板:
<button (click)="onSaveClick()">Save</button>
Footer TypeScript: 页脚TypeScript:
onSaveClick() {
this.eventService.saveButtonClick();
}
Your different forms: 您的不同形式:
this.eventService.saveButtonClicked.subscribe(res => {
// Your save logic
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.