Question

我需要在一个垫子扩展面板上制作n个垫子扩展面板。所以到目前为止这没有问题，但是当我尝试打开子面板时，父面板中的close事件会触发。

我在父标题中也有输入字段。当我点击这些，或按回车时，关闭/打开事件触发。

我尝试制作一个指令，以阻止点击事件冒泡，但这只有在我点击输入字段时才有效。即使我将指令放在每个单独的html元素中，它也会触发/传播事件

import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[appStopEventPropagation]'
})
export class StopEventPropagationDirective {
  constructor() { }
  @HostListener("click", ["$event"])
  public onClick(event:any):void{
   event.stopPropagation();
  }
}

部分解决

通过在Directive中添加keydown-event方法，我解决了返回键问题。其他扩展面板的问题仍然存在。

Nice picture with my drawings of my View

HTML可能无缘无故，但嘿，它有效......有点

Part 1 Template

Part 2 Template

解决

Answer 1

如评论中所述，内部mat-accordion缺失。工作示例：https://stackblitz.com/edit/angular-rzjstg

Answer 2

我不知道你的模板是怎样的。你能做的是：

<mat-panel-description>
  <input placeholder="Type your name and age" (click)="$event.stopPropagation()"/>
</mat-panel-description>

Angular 5 mat-expansion-panel在另一个 - Event-Propagation

2 个答案: