升级到 Angular 9 后 mat-expansion-panel 上的 stopImmediatePropagation 不起作用

Question

问题 我有一个对话框弹出一个扩展面板列表，其中包含其他扩展面板的子级。这都是使用角材料。在升级到 Angular 9 之前，我在 space down 事件中运行 event.stopImmediatePropagation 以确保当用户编辑放置在未展开面板内的字段时，它不会在 space down 时打开面板。现在，当我尝试编辑同一个字段时，扩展面板会在每个空格命中时打开，并且不会在该字段中添加空格。

预期结果 我希望能够使用空格键编辑嵌套在扩展面板中的字段，以在不打开面板的情况下添加空格

直接发行 event.stopImmediatePropagation() 和 event.stopPropagation() 不再起作用，扩展面板仍在空间上打开

代码

 <mat-accordion 
                                cdkDropList
                                id={{question.id}}
                                [cdkDropListData]="question.answers" 
                                cdkDragLockAxis="y"
                                (cdkDropListDropped)="dropQuestion($event)">
                                <mat-expansion-panel *ngFor="let answer of question.answers; let k = index" class="panel-box"
                                    cdkDrag
                                    [cdkDragData]="answer"
                                    #answerPanel>
                                    <div class="panel-placeholder" *cdkDragPlaceholder></div>
<!-- HERE IS THE CODE - IVE ALSO TRIED IMMEDIATEPROPAGATION --> 
                                    <mat-expansion-panel-header  (keydown.Space)="$event.stopPropagation();">
                                        <mat-panel-title>
                                            <input name="placeholder" type="text" (click)="$event.stopPropagation()" placeholder="Enter placeholder" [ngModel]="answer.isButton ? answer.displayValue : answer.placeholderText" (ngModelChange)="answer.isButton ? answer.displayValue=$event : answer.placeholderText=$event" class="condition-input">
                                        </mat-panel-title>
                                        <mat-panel-description>
                                            Click to edit this {{returnAnswerType(answer)}}
                                        </mat-panel-description>
                                    </mat-expansion-panel-header>
                                    <mat-action-row class="action-row">
                                        <div>
                                            <button style="color: #000" class="action-button" mat-mini-fab color="secondary" (click)="moveObject('answer', 1, i, j, k)">
                                                <mat-icon class="action-button-icon" matTooltip="Move Down">arrow_downward</mat-icon></button>
                                            <button style="color: #000" class="action-button" mat-mini-fab color="secondary" (click)="moveObject('answer', -1, i, j, k)">
                                                <mat-icon class="action-button-icon" matTooltip="Move Up">arrow_upward</mat-icon></button>
                                        </div>
                                        <div>
                                            <button class="action-button" disableRipple mat-raised-button color="primary" (click)="updateForm(false)"><mat-icon class="action-button-icon" matTooltip="Save">save_alt</mat-icon></button>
                                            <button class="action-button" style="color: #000" disableRipple mat-raised-button color="secondary" (click)="openAnswerSettingsDialog(answer, question)"><mat-icon class="action-button-icon" matTooltip="Edit">edit</mat-icon></button>
                                            <button mat-raised-button color="secondary" *ngIf="answer.isCard" style="color: #000;" class="action-button" (click)="openImagePickerDialog(null, answer, 'answer', i, j, k)"><mat-icon class="action-button-icon" matTooltip="Change Icon">add_photo_alternate</mat-icon></button>
                                            <button mat-raised-button color="secondary" style="color: #000;" class="action-button" (click)="openConditionsDialog('answer', answer)"><mat-icon class="action-button-icon" matTooltip="Conditions">shuffle</mat-icon></button>
                                            <button class="action-button" style="color: #000" disableRipple mat-raised-button color="secondary" (click)="addObject('answer', i, j, true, answer)"><mat-icon class="action-button-icon" matTooltip="Duplicate">file_copy</mat-icon></button>
                                            <button class="action-button" disableRipple mat-raised-button color="warn" (click)="deleteObject('answer', i, j, k, answer.id)"><mat-icon class="action-button-icon" matTooltip="Delete">delete</mat-icon></button>
                                        </div>
                                    </mat-action-row>
                                </mat-expansion-panel>
                            </mat-accordion> 
    ```

Answer 1

我发现了这个问题。事件需要在输入上，而不是面板本身...