在Angular中添加新记录时，如何使用事件发射器自动刷新列表组件？

Question

请注意，列表组件需要在使用Angular添加后自动显示数据。我的订单和列表组件不是父子关系。

这是我的order.component.ts：

export class OrderComponent implements OnInit {
  @Output() addEvent = new EventEmitter();
  @Output() addMessageEvent = new EventEmitter();
  orderForm: FormGroup;

  orders: Observable<Order[]>;
  constructor(
    private orderService: OrderService,
    private router: Router
  ) { }

  ngOnInit(): void {
    this.inOrderForm();

    this.orders = timer(0, 5000).pipe(
      mergeMap(() => this.orderService.getOrderList()),
      share(),
    );
  }

  private inOrderForm() {
    this.orderForm = new FormGroup({
      'orderName' : new FormControl(null, Validators.required),
      'price' : new FormControl(null, Validators.required),
      'discounted' : new FormControl(null)
    });
  }

  onSubmit(){
    this.orderService.addOrder(this.orderForm.value).subscribe(() => {
      this.addEvent.emit(null);
      this.addMessageEvent.emit(null);
      this.resetForm();
    }, error => {
      if(error.status === 400) {
        this.router.navigate(['bad-request']);
      } else if (error.status === 500) {
        this.router.navigate(['server-error']);
      } else if (error.status === 0) {
        this.router.navigate(['server-error']);
      }
    });
  }

  resetForm() {
    this.orderForm.reset();
  }
}

下面是我的list组件：

export class OrderListComponent implements OnInit {
  editOrder: Order;
  id: number;
  editMode = false;
  updateForm : FormGroup;

  regularBill: String;
  discountedBill: String;
  clerk: String;
  orders : Order[] = [];

  constructor(
    private orderService: OrderService,
    private router: Router
  ) { }

  ngOnInit(): void {
    if(this.editMode){
      this.initUpdateForm();
    } else {
      this.emptyUpdateForm();
    }
    this.reloadData();
  }

  reloadData() {
    this.orderService.getBills().subscribe((data) => {
      console.log(data);
      this.clerk = data[0];
      this.regularBill = data[1];
      this.discountedBill = data[2];
    });
    this.orderService.getOrderList().subscribe((data:Order[]) => {
      this.orders = data;
    }, error => {
      if(error.status === 400) {
        this.router.navigate(['bad-request']);
      }
      else if(error.status === 500) {
        this.router.navigate(['server-error']);
      }
      else if(error.status === 0) {
        this.router.navigate(['server-error']);
      }
    });
  }

  onDeleteOrder(id: number) {
    this.orderService.deleteOrder(id)
      .subscribe(data => {
        console.log(data);
        this.reloadData();
        }, error => console.log(error));
  }

  private initUpdateForm () {
    this.updateForm = new FormGroup({
      'id': new FormControl(this.editOrder.id),
      'isDiscountPercentage': new FormControl(this.editOrder.isDiscountPercentage),
      'orderName': new FormControl(this.editOrder.orderName, Validators.required),
      'price': new FormControl(this.editOrder.price, Validators.required),
      'discounted': new FormControl(this.editOrder.discounted)
    });
  }

  private emptyUpdateForm() {
    this.updateForm = new FormGroup({
      'updateOrderName': new FormControl(null),
      'updateOrderPrice': new FormControl(null),
      'updateOrderDiscount': new FormControl(),
    });
  }

  onEditOrder(order: Order) {
    this.editMode = true;
    this.editOrder = order;
    this.initUpdateForm();
  }

  onSubmit() {
    this.editMode = false;
    this.orderService.updateOrder(this.updateForm.value).subscribe((data) => {
      this.reloadData();
    }, error => {
      if(error.status === 400) {
        this.router.navigate(['bad-request']);
      } else if (error.status === 500) {
        this.router.navigate(['server-error']);
      } else if(error.status === 0) {
        this.router.navigate(['server-error']);
      }
    });
  }

  onCancel() {
    this.updateForm.reset();
    this.editMode = false;
  }
}

我应该添加什么来自动显示更新后的列表，而无需重新加载页面？谢谢

Answer 1

在list component's constructor中，声明以下内容-

@ViewChild(OrderComponent) orderPage;

现在在list component的ngOnInit中，订阅事件-

ngOnInit(): void {
    ... // your existing codes
    orderPage.addMessageEvent.subscribe(data => {
        this.reloadData(); // reload your data here..
    });
}