clase de componente principal
export class Parent { show: boolean = false; constructor() { } showChild() { this.show = true; } }plantilla de componente principal
<child [isShow]="show"></child>clase de componente hijo
export class Child { @Input isShow: boolean = false; constructor() { } onClick() { this.isShow = false; } }después de activar onClick() en el componente secundario, showChild() no funcionaría para mostrar el componente secundario.
¿por qué?
El valor se pasa exclusivamente de padre a hijo porque está usando corchetes.
Para que el valor vaya en ambos sentidos, debe utilizar un enlace de datos bidireccional.
Eso significa que su atributo isShow debería ser como:
@Input() isShow: boolean; @Output() isShowChange = new EventEmitter<boolean>();Y la plantilla debe ser
<child [(isShow)]="show"></child>o
<child [isShow]="show" (isShowChange)="show = $event"></child>Eche un vistazo a la página del tutorial de enlace de datos bidireccional:
https://angular.io/guide/template-syntax#enlace-bidireccional---
Está creando valores no sincronizados entre el elemento secundario y el principal. Dado que el padre está pasando el valor al hijo, debe cambiar el valor solo en el padre. Para enviar un valor del elemento secundario al elemento principal, debe usar un parámetro de Output como EventEmitter . Se verá así:
export class Parent { show: boolean = false; constructor() { } showChild() { this.show = true; } } <child [isShow]="show" (updateValue)="show = $event"></child> export class Child { @Input isShow: boolean = false; @Output() updateValue = new EventEmitter(); constructor() { } onClick() { this.updateValue.emit(false); } } Esto emite el valor false cuando se ejecuta el método onClick en el elemento secundario. El padre recibe ese nuevo valor y lo asigna a su variable show , que se envía al componente hijo.
Debe usar un getter y un setter para el valor para que pueda usar la sintaxis de enlace de datos bidireccional. Esto se puede lograr usando lo siguiente:
export class Child { private isShowValue = false; @Input() public get isShow(){ return this.isShowValue; } @Output() isShowChange = new EventEmitter(); set isShow(val) { this.isShowValue = val; this.isShowChange.emit(this.isShowValue); } constructor() { } onClick() { this.isShow = false; } }