Question

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

现在Prob是当我正在加载手风琴的页面内容时..正常工作... 单击折叠..所有手风琴皮..效果很好... 单击手风琴之一（在面板标题上）。通过更改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。如上所述，一旦我第二次单击全部折叠...，更改不会在panelHide上显示任何更改。

Answer 1

我认为您在执行panelHide=!panelHide时会丢失对该对象的引用，因此您的输入和panelHide不再是同一对象。

您可能应该创建一个Observable（在您的父组件以及子组件中使用的服务中），当您单击“所有”按钮时该发光就会发出，并在子组件中被订阅。

@Input属性的问题更改了角度6

1 个答案: