Question

我有一个基于角度（4）的网络应用，基于@angular/material的卡片视图。嵌入在卡片视图内容中的是一个子组件，它只显示一个svg为<object>。

以下是该卡的外观：

<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>

问题是(click)事件如果我点击svg图像（可能是因为它位于卡片视图的顶部？）不起作用，但如果我点击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)">

单击svg时，Angular事件不会被激活

1 个答案: