Question

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

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

直接发行 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

我发现了问题。该事件必须在输入而不是面板本身上……

升级到Angular 9后，mat-expansion-panel上的stopImmediatePropagation无法正常工作

1 个答案: