@Input属性更改角度 6 时出现问题

Question

我有一个问题，我试图仅使用角度和css来实现手风琴，全部展开并全部折叠。全部展开/折叠 所有链接都在父组件中，而折叠项位于子组件中。 单击展开所有/折叠子项的所有属性将通过@input变量更改。这是代码片段

现在Prob是当我加载手风琴的页面内容时处于活动状态..工作正常... 单击折叠..所有的手风琴都隐藏了..工作正常... 单击其中一个手风琴(在面板标题上)。.它通过更改面板隐藏属性展开...工作正常...

现在，当我再次单击折叠所有链接时，问题就出现了。它应该设置@Input面板再次隐藏，手风琴应该折叠。但它没有...什么也没发生..似乎它保留了其原始状态。并且代码失败。.

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
}

子组件.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..更改在面板隐藏上不显示任何更改，一旦我第二次单击全部折叠...如上所述。

Answer 1

我认为当你做panelHide=!panelHide时，你会失去对对象的引用，所以你的输入和你的panelHide不再是同一个对象。

您可能应该创建一个Observable(在父组件和子组件中使用的服务中)，当您单击"all"按钮并在子组件中订阅时发出该。