Angular 2，孩子到父母和回到孩子的沟通-Java 学习之路

首先感谢您的时间 .

我是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);
  }
};

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

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

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>

回复于 2024-04-28T03:24:57+08:00

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

1 回答

相关问题