svgをクリックすると角度イベントは発生しません

Question

角度のある（4）ベースのウェブアプリがあり、@angular/materialのカードビューがあります。カードビューのコンテンツに埋め込まれているのはサブコンポーネントで、これは単にsvgを<object>として表示します。ここで

は次のようにそのカードが見えるものです：（？それはカードビューの上にあるため、おそらく）問題は、私はSVG画像をクリックすると(click)イベントが動作しないということである

<md-card (click)="onSelect(line)"> 
    <md-card-content (click)="onSelect(line)"> 
     <app-line-overview [line]="line"></app-line-overview> 
    </md-card-content> 
    <md-card-footer> 
     <h2>{{line.name}}</h2> 
     <h3>OEE: {{line.oee}}</h3> 
    </md-card-footer> 
</md-card> 

しかし、私はsvgの周りをクリックすると、イベントが発生します。

私はmd-card { z-index: 999 }をCSSに追加しようとしましたが、違いはありません。どのようにカード内のどこをクリックしても、その中身に関係なくイベントが発生するようにするにはどうすればよいですか？

Answer 1

たぶんクリック上のリスナーにディレクティブを書くことが役立つだろう：

@Directive({ 
    selector: '[clickInside]' 
}) 
export class ClickInsideDirective { 
    constructor(private elementRef: ElementRef) { 
    } 

    @Output() 
    public clickInside = new EventEmitter<Event>(); 


     @HostListener('click', ['$event', '$event.target']) 
      public onClick(event: MouseEvent, targetElement: HTMLElement): void { 
       if (!targetElement) { 
        return; 
       } 

       const clickedInside = this.elementRef.nativeElement.contains(targetElement); 
       if (clickedInside) { 
        this.clickOutside.emit(event); 
       } 
      } 
    ... 
} 

使い方

<md-card (clickInside)="onSelect(line)"> 

を