@Input 问题属性更改 Angular 6

Question

我在尝试使用 angular 和 css 实现手风琴时遇到问题，只能展开全部和全部折叠。全部展开/全部折叠 link 位于 parent 组件中，而手风琴位于 child 组件中。单击全部展开/折叠 child 的所有属性将通过 @input 变量更改。这是代码片段

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

现在，当我再次单击全部折叠 link 时，问题出现了。它应该再次设置@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 不会在 panelHide 上显示任何更改，一旦我第二次单击 Collapse all... 如上所述。

Answer 1

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

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

@Input 问题属性更改 Angular 6

Problem with @Input property change an Angular 6

angular

angular-decorator

angular-input

@Input 问题 属性 更改 Angular 6

Problem with @Input property change an Angular 6

angular

angular-decorator

angular-input

@Input 问题属性更改 Angular 6