问波纹效应指令是全屏的，而不仅仅是在元素上

EN

import { Directive, HostListener, HostBinding, Input } from '@angular/core';
import * as htmlElementStringify from 'html-element-stringify';


@Directive({
    selector: 'button[appRipple], a[appRipple]'
})

export class RippleEffectDirective {
    isRippling = false;
    @Input() appRipple = '#fff';
    @HostBinding('class.ripple') public ripple = 'true';
    @HostBinding('style.position') public position = '"relative"';
    @HostBinding('style.outline') public outline = '"none"';
    @HostListener('click', ['$event']) onClick(evt: MouseEvent) {
        evt.preventDefault();

        if (this.isRippling) {
            return;
        }

        this.isRippling = true;

        const button: any = evt.target;
        const div = document.createElement('div');
        const xPos = evt.pageX - button.offsetLeft;
        const yPos = evt.pageY - button.offsetTop;

        div.classList.add('ripple-effect');
        div.style.height = button.clientHeight;
        div.style.width = button.clientHeight;
        div.style.top = (yPos - (button.clientHeight / 2)) + 'px';
        div.style.left = (xPos - (button.clientWidth / 2)) + 'px';
        div.style.background = this.appRipple;

        button.insertAdjacentHTML('beforeend', htmlElementStringify(div));

        window.setTimeout(() => {
            button.removeChild(button.querySelector('.ripple-effect'));
            this.isRippling = false;
        }, 3000);
    }
}

import { NgModule } from '@angular/core';
import { RippleEffectDirective } from './ripple-effect.directive';

@NgModule({
    imports: [],
    declarations: [RippleEffectDirective],
    exports: [RippleEffectDirective],
})

export class RippleEffectDirectiveModule {

    static forRoot() {
        return {
            ngModule: RippleEffectDirectiveModule,
            providers: [],
        };
    }
}

.ripple {
   overflow: hidden;
}

.ripple .ripple-effect {
    position: absolute;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background: white;
    animation-name: ripple-animation;
    animation-duration: 2s;
}

@keyframes ripple-animation {
    from {
    transform: scale(1);
    opacity: 0.4;
    }
    to {
    transform: scale(100);
    opacity: 0;
    }
}