时间戳

首页 > 解决方案 > 如何将方法绑定到组件 Angular？

angular - 如何将方法绑定到组件 Angular？

问题描述

我在模板中使用子组件：

  <slide-panel
    (swipeleft)="onSwipeLeft($event)"
    (swiperight)="onSwipeRight($event)"
    [activePane]="isLeftVisible ? 'left' : 'right'">
</slide-panel>

如您所见，我使用输入并从父组件activePane传递内部变量。isLeftVisible

此变量通过以下方式更改：

 public onSwipeLeft(event: any) {
    this.isLeftVisible = true;
  }

  public onSwipeRight(event: any) {
    this.isLeftVisible = false;
  }

我想让这个组件隔离，并将所有功能 onSwipeLeft、onSwipeRight 移到里面。

现在子组件依赖于父变量isLeftVisible。

所以，在我使用这个组件的任何地方，我都应该创建isLeftVisible.

我可以绑定但在组件内(swipeleft)="onSwipeLeft($event)"移动处理程序吗？onSwipeLeft

标签： angularangular6angular7

解决方案

您可以使用[EventEmitter][1]

您可以在孩子中执行此操作：

@Output() open: EventEmitter<any> = new EventEmitter();

//in the method that creates the events you do

this.open.emit(//your parameters);

在你父亲身上，你做到了

<.... (open)="handleopenEvent(e)" ....>

在父亲 .ts 你做：

public handleopenEvent(any:e){}

推荐阅读