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>