单击外部角度分量

debugcn 发表于 Dev

伍特125

我知道周围有很多问题，我尝试了每种解决方案，但没有一种适合我的需求。尝试过的指令，直接在我的组件中尝试过，但是一次都没有起作用。

所以我的情况是这样的；我有一个表格视图，在每个表格视图的末尾，您都可以通过单击一个图标来打开一个小的下拉列表。弹出的下拉列表很小。所以在我的父组件中，它看起来像这样；

<tbody>
    <tr *ngFor="let rows of subscriptionTable.data; let i = index;">
        <td *ngFor="let cell of subscriptionTable.data[i].data"> 
            <!-- Table actions -->
            <div *ngIf="cell.actions && cell.actions.length > 0">
                <app-dropdown
                    [actions]         = cell.actions
                    (onActionClicked) = "handleSubscriptionAction($event, i)"
                >
                </app-dropdown>
            </div>
        </td>
    </tr>
</tbody>

因此，我正在渲染多个子应用程序下拉组件，如下所示；

<div class="fs-action">
  <div class="fs-action__dots" (click)="openActionSheet($event)">
    <span class="fs-action__dot"></span>
    <span class="fs-action__dot"></span>
    <span class="fs-action__dot"></span>
  </div>

  <ul class="fs-action__list">
    <li 
      class="fs-action__item"
      *ngFor="let action of actions; let i = index;" 
      (click)="actionClicked( $event, i )" 
      [ngClass]="{'fs-action__item--danger': action.type === 'destructive' }"
    >
        {{ action.label }}
    </li>
  </ul>
</div>

我现在想做的是，一旦我在fs-action元素之外单击，该下拉列表便消失了。我想在app-dropdown组件内部执行此操作，那么与此组件相关的所有内容都放在同一位置。

但是，一旦我附加了指令或其他任何内容，hostlistener就会在每一行中添加get。然后，每次外部点击都会被触发多次。然后检查我是否在action元素之外单击就成为一种负担，因为这对其他所有元素都为false，而对于活动的元素则为hostlistenerstrue。

这个堆叠闪电事件说明了这个问题。https://stackblitz.com/edit/angular-xjdmg4

我评论了导致内部问题的部分dropdown.component.ts;

  public onClickOutside( event ) {
    // It executes 3 times, for each of the items that is added
    // Even when clicking inside the dropdown, it calls this function
    console.log("click")
  }

查理·索萨

我对类似情况使用了指令。安装：

npm install --save ng-click-outside

然后导入您的模块

import { ClickOutsideModule } from 'ng-click-outside';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ClickOutsideModule],
  bootstrap: [AppComponent]
})
class AppModule {}

在你的组件中

@Component({
  selector: 'app',
  template: `
    <div (clickOutside)="onClickedOutside($event)">Click outside this</div>
  `
})
export class AppComponent {
  onClickedOutside(e: Event) {
  console.log('Clicked outside:', e);
  }
}

它有一些选择。您可以在https://www.npmjs.com/package/ng-click-outside中看到它

问候

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。