Проблема с изменением свойства @Input на Angular 6

Question

У меня проблема, когда я пытаюсь реализовать аккордеон, используя angular и css, только с расширением всех и свертыванием всех. Развернуть все / Свернуть все ссылки находятся в родительском компоненте, а аккордеоны - в дочернем компоненте. При нажатии развернуть все / свернуть все свойство дочернего элемента изменится через переменную @input. Вот фрагмент кода

Теперь, вероятно, когда я загружаю содержимое страницы, аккордеон активен.. работает нормально... Нажмите свернуть.. все аккордеон скрывается.. отлично работает... нажмите один из аккордеона (в заголовке панели).. он расширяется на изменение свойства panelHide... отлично работает...

Теперь проблема возникает, когда я снова нажимаю на ссылку свернуть все. Он должен снова установить @Input panelHide, и аккордеон должен разрушиться... но это не... Ничего не происходит... Кажется, он сохраняет свое исходное состояние. И код не работает..

parent.component.html

<a (click)="expandAll(true)">Expand All</a>
<a (click)="expandAll(false)">Collapse All</a>

<child-component [isAllCollapsed]="isAllCollapsed"></child-component>

parent.component.ts

isAllCollapsed:boolean=false;

expandAll(action:boolean){
this.isAllCollapsed=action
}

Child.component.html

<div [ngClass]="'is-active':!panelHide">
<a (click)="panelHide=!panelHide">Panel Header</a>
<div>
Panel Content--- hide and show according to is-active class, with help of css.
<div>
</div>

child.component.ts

@Input('isAllCollapsed') panelHide:boolean;

Я пробовал ngOnChanges.. Changes не показывает никаких изменений на панели Hide, когда я нажимаю Свернуть все во второй раз... как описано выше.

Answer 1

Я думаю, когда ты делаешь panelHide=!panelHide вы теряете ссылку на объект, поэтому ваш ввод и панель Hide больше не являются одним и тем же объектом.

Вам, вероятно, следует создать Observable (в службе, используемой в вашем родительском компоненте, а также в ваших дочерних компонентах), который излучается, когда вы нажимаете кнопки "все", и подписывается в ваших дочерних компонентах.