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

Question

我需要在一个 mat-expansion-panel 中制作 n mat-expansion-panels。所以到目前为止这没有问题，但是当我尝试打开 child-panel 时，parent-panel 中的 close-event 触发器。

我在parent的header里也有input-fields。当我单击这些或按 return 时，closing/open-events 触发器。

我试图制定一个指令，以阻止 click-event 冒泡，但这只有在我单击输入字段时才有效。即使我将指令放在每个 html-element 中，它 triggers/propagates 事件

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

部分解决

我通过在指令中为 keydown-event 添加方法解决了 return-key-problem。其他扩展面板的问题仍然存在。

Nice picture with my drawings of my View

HTML 可能无缘无故有点大，但是，嘿，它有用……有点

Part 1 Template

Part 2 Template

已解决

Answer 1

我不知道你的模板是什么样子的。您可以做的是：

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

Answer 2

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

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

Angular 5 mat-expansion-panel in another one - Event-Propagation

events

stoppropagation

typescript

angular-material

angular