Question

首先感谢您的时间。

我是Angular 2的新手，我正在努力了解如何解决这个问题。

组件结构：

<parent-component>
  <dynamic-button></dynamic-button>
  <dynamic-button></dynamic-button>
  ...
</parent-component>

子组件

export class DynamicButtonComponent {
  @Output() clicked: EventEmitter<any> = new EventEmitter<any>();

  loading: Boolean = false;
  handleClick(event: any) {
    this.loading = true;
    this.clicked.emit(event);
  }
};

当我点击动态按钮时，我将向父母发送一个事件。使用＆＃39; loading＆＃39;按钮旁边会显示一个微调器。变量。然后父进行API调用，当API调用完成后，我想从父进程（最初发送事件）向子组件发送一个prop，以停止显示微调器。

请告知解决此问题的最佳/最干净方法。我想过对事件发射器进行回调，但我在StackOverflow中读到它反对Angular 2的原理

Answer 1

您可以使用OnChanges生命周期钩子捕获子组件上的@Input更新以进行。

父：

export class ParentComponent {
    finishedLoading: boolean = false;
    doApiWork(){
        ...
        finishedLoading = true;
    }
}

子：

export class DynamicButtonComponent implements OnChanges{
    @Input() loadingDone = false;

    ngOnChanges(){
        if(loadingDone){
           //Execute 
        }
    }
}

在视野中绑定：

<parent-component>
  <dynamic-button [loadingDone]="finishedLoading"></dynamic-button>
  ...
</parent-component>

Angular 2，孩子到父母和回到孩子的沟通

1 个答案: