@Input 属性的问题更改 Angular 6答案

【问题标题】：Problem with @Input property change an Angular 6@Input 属性的问题更改 Angular 6
【发布时间】：2019-07-17 15:23:37
【问题描述】：

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

现在可能是当我加载手风琴的页面内容时处于活动状态......工作正常...... 单击折叠..所有手风琴隐藏..工作正常... 单击其中一个手风琴（在面板标题上）..它通过更改 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 上显示任何更改，一旦我第二次单击 Collapse all... 如上所述。

【问题讨论】：

我认为您需要使用带有 setter @Input()set name(name: string) {//statement} 功能的拦截输入属性更改，您可以每次都获取更新值。如果我能正确理解您的问题
已经试过了..不工作..还是谢谢...

标签： angular angular-decorator angular-input

【解决方案1】：

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

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

【讨论】：