Изменение @Input() в свойствах дочернего компонента предотвращает дальнейшие обновления родительского компонента.

The issue

В первый раз, когда вы устанавливаете isChild1Visible, с односторонней привязкой он также устанавливает дочерний элемент isVisible в значение true.

Изнутри вы устанавливаете isVisible в false, поэтому div исчезает, как у вас есть *ngIf="isVisible".

Однако внешний isVisible по-прежнему true!

Когда вы снова нажимаете внешнюю кнопку, никаких изменений для обнаружения не происходит, поскольку значение остается прежним, поэтому дочернему элементу ничего не передается.

См. этот демонстрация stackblitz с открытыми обоими логическими значениями.

Option 1: Explicitly listen to on output

Если вы хотите управлять компонентом извне, вы должны оставить логику снаружи.

Возможный способ - добавить @Output к вашему дочернему элементу, который является EventEmitter, который испускается, когда вы хотите закрыть дочерний элемент.

Родитель прослушает это событие и сделает что-нибудь, например установит для isVisible значение false.

Вы можете увидеть это на этом обновленном stackblitz.

Демонстрация на stackblitz.

Поскольку данные isChild1Visible передаются как примитивный тип (логический), они будут передаваться по значению.

Следовательно, при передаче объекта, массива и т.п. он передается по ссылке, а для примитивных типов, таких как числа, передается по значению.

попробуйте это без добавления каких-либо дополнительных выходов:

Компонент MyAppChild1

export class MyAppChild1Component implements OnInit {
  @Input() isVisible;
  constructor() {}

  ngOnInit() {}
  onClick() {
    this.isVisible.value = false;
  }
}

<div *ngIf="isVisible.value">
  <span>
Child
</span>
  <button (click)="onClick()">Hide me</button>
</div>

Компонент приложения

export class AppComponent {
  isChild1Visible = { value: false };
  ngOnInit() {}
  onShowChild() {
    this.isChild1Visible.value = true;
  }
}

<div>
  <p>Parent</p>
  <button (click)="onShowChild()">show Child</button>
  <app-my-app-child1 [isVisible]="isChild1Visible"></app-my-app-child1>
</div>

Это происходит потому, что isChild1Visible в app.component не обновляется, когда дочерний компонент устанавливает isVisible.

First Click on onShowChild()

• isChild1Visible = правда
• isVisible = правда

Second Click on onClick() in child

• isVisible = ложь;
• isChild1Visible = правда

Second Click on onShowChild()

• isChild1Visible = true // => Здесь нет изменений
• isVisible = ложь

Поскольку значение isChild1Visible не меняется, Angular ничего не обновляет.

Чтобы активировать обнаружение изменений и синхронизировать значения, вам необходимо использовать двухстороннюю привязку.

<app-my-app-child1 [(isVisible)]="isChild1Visible"></app-my-app-child1>

export class MyAppChild1Component implements OnInit {
  @Input() isVisible;
  @Output() isVisibleChange = new EventEmitter<boolean>();

  constructor() {}

  ngOnInit() {}
  onClick() {
    this.isVisibleChange.emit(!this.isVisibleChange);
  }
}

Обновленная песочница