时间戳

首页 > 解决方案 > @Input 属性的问题更改 Angular 6

angular - @Input 属性的问题更改 Angular 6

问题描述

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

现在问题是当我加载手风琴的页面内容时处于活动状态..工作正常...单击折叠..所有手风琴隐藏..工作正常...单击其中一个手风琴（在面板标题上）..它扩展为更改 panelHide 属性...工作正常...

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

父组件.html

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

<child-component [isAllCollapsed]="isAllCollapsed"></child-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 上显示任何更改，一旦我第二次单击 Collapse all ... 如上所述。

标签： angularangular-decoratorangular-input

解决方案

我认为当您这样做时，panelHide=!panelHide您会丢失对对象的引用，因此您的 input 和 panelHide 不再是同一个对象。

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

推荐阅读