Tengo un componente "Terminal" que debería poder usarse varias veces en toda mi aplicación. Este componente también debería poder ponerse en un modo de "solo lectura" en el que pasa un solo comando que le gustaría que el terminal active y mostrará la salida. Estoy tratando de que este componente pueda ser actualizado por muchas cosas; actualización de datos en otros lugares, eventos de usuario, etc. Para lograr esto, actualmente estoy usando sujetos RxJS como @Input en el componente terminal que, cuando se actualiza, activa las funciones suscritas. Esto funciona para el primer clic del usuario (ver más abajo), pero después de eso, el tema no se actualiza nuevamente. Sospecho que esto se debe a que el "objeto" no se actualiza, porque angular no registra el cambio y toda mi idea se desmorona.
¿Puedo arreglar esto? o necesito rediseñar este componente "Terminal"?
terminal.componente.ts
export class TerminalComponent implements OnInit, OnDestroy { constructor() {} $destroy = new Subject(); terminalOutput = ''; // Command input (if you want the terminal to only fire one command) @Input() command = ''; $command: BehaviorSubject<string> = new BehaviorSubject(''); // Refresh terminal input $refresh: Subject<void> = new Subject(); @Input() set refresh(value: Subject<void>) { this.$refresh = value; } // ReadOnly Input @Input() readOnly = false; ngOnInit(): void { this.$refresh .pipe( takeUntil(this.$destroy), tap(() => { const lastCommand = this.$command.getValue(); if (lastCommand) { console.log('Refreshing, last command is:', lastCommand); } }) ) .subscribe(); //... } //... }padre.componente.html
<h1>Home</h1> <app-terminal command="ls" [refresh]="$refreshSubject"></app-terminal> <button (click)="refreshTest()">Refresh</button>padre.componente.ts
export class ParentComponent implements OnInit { $refreshSubject: Subject<void> = new Subject(); constructor() {} ngOnInit(): void {} refreshTest(): void { console.log('Refreshing'); this.$refreshSubject.next(); } }Así que encontré el problema, era otro error en mi código que estaba causando que el toque RxJS no se disparara después de la primera vez.
ngOnInit(): void { this.$refresh .pipe( takeUntil(this.$destroy), tap(() => { const lastCommand = this.$command.getValue(); if (lastCommand) { console.log('Refreshing, last command is:', lastCommand); throw new Error("Example Error"); // ^^^^ This will cause future Subject emits to not fire as this function has failed. } }) ) .subscribe(); //... }Nota al margen: creo que el título de la pregunta debería cambiarse para adaptarse mejor al problema real con mi código, y así tener un mejor SEO. Sin embargo, si esta es una pregunta completamente basura, creo que debería eliminarse.