Angular 9如何刷新子组件中的@Input数据

Question

我有一个子组件，它在 mat-table 中显示来自父组件的结果作为 @Input。

我在子级中使用对话框组件来编辑 mat-table 中的行。然后在数据库中更新行值。

但问题是我的@Input 数据没有更新，所以我尝试创建新的数据源 onChangedetector 但表没有更新。刷新页面后，表格会更新，因为我将新数据作为 @Input 获取。

所以我的问题是无论如何更新子组件中的@Input 数据（即刷新父组件，以便在从数据库更新后发送新的输入数据）

我认为一种方法是通过调用子组件中父组件使用的服务来更新@input数据...

有没有更好的解决方案？

Answer 1

前段时间，我使用@Input 和@Output 编写了这段代码。通过这些装饰器，您可以在父组件和子组件之间传递值。在此示例中，如果父组件的输入发生了一些变化，则再次执行 set month 函数。

为了注意到 child 中发生的变化，您可以使用 @Output 中的 emit 函数。

希望对您的问题有所帮助。或者至少给你一些关于如何改进它的想法。

  @Input() 
  set month(data:any) {
    // data = {year: 2020, month: 4}
    this.GenerateDays(data.year, data.month); // 2019/Agosto (2019, 7) Ene=0
  }

  @Output() onDayChange = new EventEmitter();    

/////////////////////////////////////////////////////////////////////////////
  private GenerateDays (year:number, month:number) {
    // Logic to Generate Days           
  }

  public SelectDay (id:number) {    
    this.selectedDay = id;
    this.onDayChange.emit(this.selectedDay);
  }