使用多个弹出窗口时出现 ngx-admin 错误

Question

我正在使用 ngx-admin NbPopover，每页 4 个附件。我想在活动结束时关闭活动。

@ViewChild (NbPopoverDirective) popverDirective: NbPopoverDirective;
this.popverDirective.hide();

我只能使用其中一个。其他人不工作。你能帮忙吗？

Answer 1

如果您有多个 NbPopoeverDirectives，您可以使用 @ViewChildren 获取它们，因此请尝试以下代码：

@ViewChildren(NbPopoeverDirective) popovers: QueryList<NbPopoeverDirective>;

...

hidePopups(){
  if(this.popovers){
     this.popovers.forEach(popover => {
        popove.hide();
      });
  }
}

Answer 2

如果你有多个NbPopoverDirective，你可以在持有指令的元素上添加一个selector，并使用@ViewChild的“读取”选项来获取NbPopoverDirective

Component.html:

<nb-action #transferAction [nbPopover]="transferPopoverComponent"></nb-action>
<nb-action #orderAction  [nbPopover]="orderPopoverComponent"></nb-action>

Component.ts:

  @ViewChild("transferAction", { read: NbPopoverDirective }) transferPopover: NbPopoverDirective;
  @ViewChild("orderAction", { read: NbPopoverDirective }) orderPopover: NbPopoverDirective;

看看我们如何用“#transferAction”标记 nb-actions 并将其用于 select ViewChild，然后阅读内部指令

使用多个弹出窗口时出现 ngx-admin 错误

ngx-admin error when using multiple popovers

typescript

ionic3

angular5

nebular