Tengo un componente de notificación, que es un componente secundario y se muestra en el componente principal después de hacer clic en un botón. Después de unos segundos personalizados, se ocultará. Hasta ahora he encontrado este código (Stackblits).
Componente principal:
<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; } }Niño comp:
<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) }Esto funciona perfectamente, pero después de 3 segundos como en el ejemplo, si hago clic en el botón, el componente secundario no se muestra. Qué estoy haciendo mal. Soy nuevo en Angular, por favor ayúdame.
También quiero manejar lo mismo para ambas instancias del niño.
Debe mover el código para el tiempo de espera fuera de ngOnChanges . En la configuración de su componente, un setter haría el truco.
@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; }Además de un feo truco para evitar que Angular no se dé cuenta de que este valor debe restablecerse:
@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); } }Usar RxJS Observables resolvería este problema de una buena manera, pero también sería más complicado si eres nuevo en Angular.