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

【问题标题】：ngx-bootstrap - Accordion group within Child Componentngx-bootstrap - 子组件中的手风琴组
【发布时间】：2021-06-29 14:17:37
【问题描述】：

父组件

<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>

我要做什么

在父组件中维护手风琴并调用具有的子组件

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

为什么我要这样做

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

例如：

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

如果子组件 1 的 dataExists 为 false，则不显示此

我面临的问题

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

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

观察

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

【问题讨论】：

标签： html angular bootstrap-4 ng-bootstrap ngx-bootstrap

【解决方案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>

【讨论】：