在特定秒內向父組件顯示和隱藏子組件

我有通知組件，它是一個子組件，在單擊按鈕后顯示在父組件中。在自定義幾秒鐘后，它將被隱藏。到目前為止，我已經想出了這段代碼（Stackblits）。

我的代碼

父組件：

<button (click)="handleClick()">Initiate Message</button>

<app-notification [message]="message" [duration]="3000" [show]="show"></app-notification>

<app-notification [message]="message" [duration]="6000" [show]="show"></app-notification>

export class AppComponent  {
   message:string;
   show:boolean;


  handleClick(){
    this.message = 'Good Morning';
    this.show=true;
  }
}

兒童補償：

<div class="container" *ngIf="show">
  {{ message }}
</div>

 @Input() message: string;
  @Input() duration: number;
  @Input() show = false;

  constructor() {}

  ngOnChanges(changes: SimpleChanges) {
    console.log(this.show)
    setTimeout(()=>{
      this.show = false;
      console.log(3)
    }, this.duration)
  }

這完美地作業，但在示例中的 3 秒后，如果我單擊按鈕，則不會顯示子組件。我究竟做錯了什么。我是Angular的新手，請幫助我。

我也想為孩子的兩個實體處理同樣的事情。

uj5u.com熱心網友回復：

您必須將超時代碼移出ngOnChanges. 在您的組件設定中，setter 可以解決問題。

@Component({
  selector: 'app-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.css'],
})
export class NotificationComponent {
  @Input() message: string;
  @Input() duration: number;
  @Input() set show(value: boolean) {
    this._show = value;
    // Or find another failsafe if the values are not set as expected
    if (value && this.duration) {
      this._show = true;
      setTimeout(() => {
        this._show = false;
      }, this.duration);
    }
  }
  get show(): boolean {
    return this._show;
  }

  private _show = false;
}

以及一個丑陋的 hack 來避免 Angular 沒有意識到需要重置這個值：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  message: string;
  show: boolean;
  duration: number;

  handleClick() {
    this.message = 'Good Morning';
    this.show = true;
    setTimeout(() => (this.show = false), 1);
  }
}

使用 RxJS Observables 可以很好地解決這個問題，但如果你是 Angular 新手，它也會更加復雜。

uj5u.com熱心網友回復：

你可以這樣做：app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
   message:string;
   show:boolean;
   duration:number;


  handleClick(){
    this.message = 'Good Morning';
    this.duration = 3000;
    this.show = true;
  }

  hideShow(event) {
    this.show = event;
  }
}

并且app.component.html：

<button (click)="handleClick()">Initiate Message</button>

<app-notification [message]="message" [duration]="duration" [show]="show" (hideShow)="hideShow($event)"></app-notification>

并且notification.component.ts：

import { Component, Input, OnChanges, OnInit, Output, SimpleChanges, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.css'],
})
export class NotificationComponent implements OnInit, OnChanges {
  @Input() message: string;
  @Input() duration: number;
  @Input() show: boolean;
  @Output() hideShow = new EventEmitter<boolean>();

  constructor() {}

  ngOnChanges(changes: SimpleChanges) {
    if(this.duration) {
      setTimeout(()=> {
        this.show = false;
        this.hideShow.emit(false);
      }, this.duration);
    }
  }
  
  ngOnInit() {
  }
}

標籤：javascript html css 有角度的 打字稿

上一篇：從Angular-Typescript中的docker卷讀取/匯入檔案

下一篇：Nest-Nest無法決議依賴項