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没有任何联系-这就是我的问题。如何通过Product将ngrx对象从“常规信息”组件添加到页脚组件中？

谢谢！

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>

页脚打字脚本：

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

您的不同表格：

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

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

1 个答案: