使用 setTimeout() 自定义 Angular 通知消息显示问题

Question

我在屏幕上显示通知消息时遇到问题。 当我单击按钮显示通知消息时，会在间隔中定义的几秒钟后显示并删除弹出窗口。但是当我多次单击该按钮时，弹出窗口不会保持可见状态，比如说 2 秒，但只有 1 秒或更少，有时它只会在屏幕上闪烁。

我希望它的行为方式是，当我单击按钮时，将删除任何以前的弹出窗口并显示新的弹出窗口，该窗口将显示 2 秒（除非有下一次单击按钮并显示新的弹出窗口）或旧的弹出窗口将可见 2 秒，新的弹出窗口将放置在前一个/秒的上方。

您有什么更正的建议：

这是我的代码： HTML：

<div class="container">
  <div class="notifications">
    <scale-notification-message 
      variant="success" 
      opened
      @fadeAnimation
      *ngIf="successMessage$ | async as successMessage">
      {{ successMessage }}
    </scale-notification-message>
  </div>

  <button 
    type="button" 
    class="btn" 
    (click)="onClick()">
      Click
  </button>
</div>

TS 文件

import { tap } from 'rxjs/operators';
import { Observable } from 'rxjs';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'notification-messages';
  visible: boolean = true;

  successMessage$: Observable<string> = this.notificationService.successMessageAction$.pipe(tap(_ => {
      setTimeout(() => {
        this.notificationService.clearSuccessMessage();
      }, 2000)
  })   
  );

  constructor(private notificationService: NotificationService) {}

  onClick() {
    this.notificationService.setSuccessMessage('Button clicked!');
  }
}

服务

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class NotificationService {
  private successMessageSubject = new Subject<string>();
  successMessageAction$ = this.successMessageSubject.asObservable();

  setSuccessMessage(message: string) {
    this.successMessageSubject.next(message);
  }

  clearSuccessMessage() {
    this.setSuccessMessage('');
  }
}

Answer 1

它不起作用，因为在明确的消息中，您正在再次设置消息，这将在 2 秒后触发新的超时。

对于这种情况，您可以通过将代码更改为以下内容来避免这种情况：

  successMessage$: Observable<string> = this.notificationService.successMessageAction$.pipe(tap(value => {
  if(!!value){
    setTimeout(() => {
      this.notificationService.clearSuccessMessage();
    }, 2000);
  }

})
);

非常感谢您的指正。我更正了代码，但我>仍然有一个问题，当我再次单击按钮时>上一个弹出窗口可见，然后在弹出窗口消失时再次单击，弹出窗口保持可见一秒钟或它只是在屏幕上闪烁. – 维多利亚 3 小时前

你可以使用：

timeout: any = null;
successMessage$: Observable<string> = 
this.notificationService.successMessageAction$.pipe(tap(value => {
  if(!!this.timeout){
    clearTimeout(this.timeout);
  }
  if (!!value) {
    this.timeout = setTimeout(() => {
      this.notificationService.clearSuccessMessage();
      this.timeout = null;
    }, 2000);
  }
  })
);