时间戳

首页 > 解决方案 > 如何使用角度指令在按下转义键时破坏主机组件？

angular - 如何使用角度指令在按下转义键时破坏主机组件？

问题描述

以下是我在按下退出时销毁弹出窗口的实现。

@Directive({
  selector: '[escapeHostDestroy]',
})

export class DestroyPopUpOnEscapeDirective {
    constructor(
      private renderer: Renderer2,
      private el: ElementRef,
      private viewContainerRef: ViewContainerRef
    ) {}

    @HostListener('document:keydown.escape', ['$event']) destroyHost(ev: KeyboardEvent) {
        this.renderer.destroy();
    }
  }

但似乎它不起作用。

我可以使用渲染器（设置样式）隐藏/显示此弹出窗口。但我不想那样。相反，我想销毁指令所在的主机组件。

我怎样才能做到这一点？

& 还有一个疑问，我如何访问指令中的组件方法（这样我就可以从指令本身触发事件......就像将组件注入到指令中）

//main component.html

<app-popup *ngIf="showPopup"></app-popup>

// popup component.html
<div escapeHostDestroy>
... {%rest of popup contents here%}
</div>

标签： angular

解决方案

鉴于您的评论和用例，以下内容可能会有所帮助：

https://stackblitz.com/github/ClientsideDesign/ngx-dialog-injection-starter-pack

这是一个可重用的材质对话框的实现，带有一个注入的子组件（它有一个表单）以及父子组件之间的通信。根据@poul的回答，设置服务以在应关闭对话框时进行通信是关键。

  • dialog-wrapper是一个对话框组件
  • dialog-form是注入动态组件的示例dialog-wrapper，具有必要的支持服务。
  • name(Alice) 是任意数据从父组件传递到dialog-formviadialog-wrapper
  • 当提交表单时，带有nameand的对象favouriteFood会被传递回父级。dialog-form这也会触发父组件关闭dialog-wrapper。

我试图使代码尽可能简单，以便可以轻松地重新分配任务。对话框包装器本身相当简单；大部分繁重的工作都在注入的组件和父组件中。

根据您的原始帖子，当您按下 时，对话框关闭并且子组件被销毁escape。

完整的代码可以在https://github.com/ClientsideDesign/ngx-dialog-injection-starter-pack上查看。

推荐阅读