modal 声音试听弹窗

 

demo 记录：

html

<ng-container>
    <div class="audition-modal">
        <p class="item" *ngFor="let item of list; let sub = index">
            <span>{{ sub + 1 }}. {{ item.name | translate }}</span>
            <span><b class="alar-voice" (click)="onAuditionClick(item)"></b></span>
        </p>
        <div class="audition-alert">
            <span class="audition-attention">{{ 'Explorer.Alarm.Attention' | translate }}：</span>
            <p>1. {{ 'Explorer.Alarm.AttentionConfirm' | translate }}</p>
            <p>2. {{ 'Explorer.Alarm.AlertContent' | translate }}</p>
        </div>
    </div>
</ng-container>

 

scss

.audition-modal {
  line-height: 35px;
  text-align: center;
  padding: 10px;

  .item {
    display: flex;

    .alar-voice {
      position: unset;
    }

    & > span {
      flex: 1;
    }
  }

  .audition-alert {
    text-align: left;
    line-height: 18px;
    margin-top: 10px;
    color: #f00;
    font-size: 12px;
    position: relative;
    padding-left: 60px;

    .audition-attention {
      position: absolute;
      left: 15px;
      top: 0;
    }
  }

}

父级scss 相关

@mixin alar-voice {
    cursor: pointer;
    display: inline-block;
    position: relative;
    top: 5px;
    left: 2px;
    height: 24px;
    width: 24px;
    background-size: 24px 24px;
    background-image: url('../../../../../assets/icon/Audition.svg');
}

::ng-deep {
    .alar-voice {
        @include alar-voice;
        left: unset;
        top: unset;
        right: 0;
        position: absolute;
    }
}

 

component

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-audition-sound',
    templateUrl: './audition-sound.component.html',
    styleUrls: [ './audition-sound.component.scss' ]
})
export class AuditionSoundComponent implements OnInit {
    // 记录 audio 元素
    auditionEle: any = null;

    list: any[] = [
        { name: 'Explorer.Alarm.AlarmLevel.Low', key: 0 },
        { name: 'Explorer.Alarm.AlarmLevel.High', key: 1 },
        { name: 'Explorer.Alarm.AlarmLevel.Urgent', key: 2 },
    ];

    constructor() {
    }

    ngOnInit() {
        setTimeout(() => {
            this.auditionEle = document.getElementById('audition-audio');
        });
    }

    /**
     * 根据点击类型，播放对应音频
     * @param item Object
     */
    onAuditionClick(item: any) {
        const type = item.key;
        let url = '';
        switch (type) {
            case 0:
                url = './assets/audio/AlarmSoundLow.mp3';
                break;
            case 1:
                url = './assets/audio/AlarmSoundHigh.mp3';
                break;
            case 2:
                url = './assets/audio/AlarmSoundUrgent.mp3';
                break;
        }
        console.log(type);
        this.auditionEle.src = url;
        this.auditionEle.play();
    }
}

 

外部调用

/**
 * 点击试听按钮，打开对话框
 */
openAuditionModal() {
    const translate = getTranslateAsync();
    translate('Explorer.Alarm.AuditionSound').then(title => {
        const instance = this.modalService.create({
            nzTitle: title,
            nzBodyStyle: {
                padding: '0px',
            },
            nzWidth: 400,
            nzContent: AuditionSoundComponent,
            nzCancelText: null,
            nzOkType: 'default',
            nzOnOk: () => {
                let ele: any = document.getElementById('audition-audio');
                ele.src = '';
                instance.destroy();
            },
            nzOnCancel: () => {
                let ele: any = document.getElementById('audition-audio');
                ele.src = '';
                instance.destroy();
            },
        });
    });
}