ngx-bootstrap - 子组件中的手风琴组

Question

父组件

<input type="button" class="btn btn-primary"  (click)="allExpanded = !allExpanded" [attr.value]="allExpanded ? 'Collapse All': 'Expand All'" >  
            <div class="all-components" >
                <accordion>
                    <accordion-group heading="Test1" [isOpen]="allExpanded">
                    Hey
                    </accordion-group>
                    <accordion-group heading="Test2" [isOpen]="allExpanded">
                    Hey
                    </accordion-group>
                    <app-child-comp-1 allExpanded = "{{ allExpanded }}" ></app-child-comp-1>
                    <app-child-comp-2 allExpanded = "{{ allExpanded }}" ></app-child-comp-2>
                </accordion>
            </div>

子组件 1

<accordion-group heading="Child Component *ngIf="dataExists" [isOpen]="allExpanded">
Hey
</accordion-group>

我正在尝试做的事情

在父组件中维护手风琴并调用具有 <accordion-group> 的子组件

单击父组件中的按钮时，将 <accordion-group> [isOpen] 属性设置为 true/false 作为折叠/展开所有组件的一种方式

为什么我要这样做

某些子组件可能没有数据，如果是这种情况，我不希望显示 <accordion-group>

例如：

<accordion-group heading="Child Component" *ngIf="dataExists" [isOpen]="allExpanded">
Hey
</accordion-group>

如果子组件 1 的 dataExists 为 false，则不显示此 <accordion-group>

我面临的问题

将 allExpanded 传递给子组件并设置 [isOpen]="allExpanded" 在子组件中无法按预期工作 - 它只会展开，不会折叠。

它适用于在父组件中定义的 <accordion-group>。 在我看来，这个问题与如何从父组件调用子组件有关，但我对 Angular 很陌生，所以我迷路了。

观察

单击展开/折叠按钮时，所有 [isOpen] 都从 True 更改为 False，但组的 class 仅针对父组件中定义的更改，而不是子组件中定义的更改。

Answer 1

似乎您在这里不需要子组件。 ng-container就足够了

<input type="button" class="btn btn-primary"  (click)="allExpanded = !allExpanded" [attr.value]="allExpanded ? 'Collapse All': 'Expand All'" >  
            <div class="all-components" >
                <accordion>
                    <accordion-group heading="Test1" [isOpen]="allExpanded">
                    Hey
                    </accordion-group>
                    <accordion-group heading="Test2" [isOpen]="allExpanded">
                    Hey
                    </accordion-group>
                    <ng-container *ngIf="dataExists">
                       <accordion-group heading="Child Component" [isOpen]="allExpanded">
                          Hey
                       </accordion-group>
                       <accordion-group heading="Child Component" [isOpen]="allExpanded">
                          Hey
                       </accordion-group>
                    </ng-container>
                </accordion>
            </div>