Question

我想创建一个按钮，该按钮将在单击后禁用并启用第二天，即该按钮将启用单日单击。

用户将来到办公室并在单击按钮被禁用后单击按钮，并且仅在第二天启用。

Answer 1

有很多方法可以做到这一点。 ts文件中有一个，您可以添加HostListener


export class SampleComponent implements OnInit {
    @HostListener('window: click', ['$event'])
    onClick(ev) {
        const element = ev.target;
        if (element.classList.contains('classImLookingFor'){
            element.style.pointerEvents = 'none'
            // or if it's a button
            element.disabled = true;
        }

    }

    ...
}

您还可以放入模板<button [disabled]='current.date === date'>Date</button>

Answer 2

我最近使用本地存储和moment.js库（与模式和ngx-bootstrap一起使用）做了类似的事情。我认为可以轻松地将其转换为按钮。在我的场景中，我只希望模式显示用户是否在9个小时前看到了它并单击了接受。使用本地存储在某种程度上受到限制，因为如果用户要清除其浏览器数据，他们还将清除本地存储，并且模式将再次出现。就我而言，这并不重要，但是在您的实例中要考虑一些事情。

示例代码：

import { ModalDirective } from 'ngx-bootstrap/modal';
import * as moment from 'moment';
import { Component, OnInit, ViewChild } from '@angular/core';
export class LoginBannerComponent implements OnInit {

constructor() {}

ngOnInit() {
    const lastBannerShow = localStorage.getItem('lastBannerShow');
    const lastBannerShowMoment = lastBannerShow ? moment(lastBannerShow) : moment('1900-01-01');
    const now = moment();

    if (now.diff(lastBannerShowMoment, 'seconds') > 30) {
        this.isModalShown = true;
        localStorage.setItem('lastBannerShow', moment().format());
    } else {
        this.isModalShown = false;
    }
}

@ViewChild('autoShownModal', { static: false })
autoShownModal: ModalDirective;
isModalShown = false;

showModal(): void {
    this.isModalShown = true;
}

hideModal(): void {
    this.autoShownModal.hide();
}

onHidden(): void {
    this.isModalShown = false;
}
accept(): void {
    this.autoShownModal.hide();
}

reject(): void {
    this.isChildModalShown = true;
    this.isModalShown = false;

}

在我的HTML模板中：

<div #autoShownModal="bs-modal"
 (onHidden)="onHidden()"
 *ngIf="isModalShown"
 [config]="{ show: true, animated: true, backdrop: true, ignoreBackdropClick: true }"
 aria-labelledby="dialog-auto-name"
 bsModal
 class="fade modal"
 role="dialog"
 tabindex="-1">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-body text-white"
             style="background-color: #0072CE">
            <p class="font-weight-bold h4 text-capitalize text-center">MODAL CONTENT HERE</p>
            <div class="modal-footer text-white">
                <button (click)="accept()"
                        class="btn btn-success mr-auto"
                        type="button">
                    Accept
                </button>
                <button (click)="reject()"
                        class="btn btn-danger"
                        type="button">
                    Reject
                </button>
            </div>
        </div>
    </div>
</div>

查看我的ngOnInit部分中的内容，看看是否无法使用模板中的ngIf标记复制该本地存储功能和moment.js日期比较。您可以使用按钮，然后根据ngOnInit中的逻辑结果禁用或启用该按钮，而不用显示“横幅显示”。

第一次单击后如何禁用按钮，我希望一天后单击按钮功能

2 个答案: