Mat Accordion multi=false 有 2 个面板 A 和 B。当 B 中发生 keyup.ENTER 事件时如何使 A 打开？

Question

这应该很简单，但我相信由于面板 B 包含 ACE 编辑器控件而变得复杂。

我正在 Ace 编辑器控件及其父面板 B 扩展面板容器中捕获 (keyup.ENTER) 事件，以便 (1) 折叠包含 ACE 编辑器的面板 B，以及 (2) 打开/展开包含从 ACE 编辑器的 html 内容构建的预览的面板 A。

也许我想得太多了，但尽管我可以从 ACE 编辑器注销 keyup.ENTER 事件以及从其父级

mat-expansion-panel

注销 keyup.ENTER 事件，但我无法关闭面板 B 并关闭面板由于此事件，A 将打开。

我的console.log显示扩展变量的值正在改变，但扩展面板似乎不想配合。

这是模板代码：

<mat-accordion multi="false">
    <!--PANEL A-->
      <mat-expansion-panel 
        *ngIf="dragDropMode"
        #panelA
        class="canvas-panel" 
        [expanded]="dragDropMode || editorPanelExpanded"
        (opened)="setEditorPanel(true)"
      >
      <mat-expansion-panel-header>
        <mat-panel-title>Panel A</mat-panel-title>
        <mat-panel-description></mat-panel-description>
      </mat-expansion-panel-header>
      <ng-template matExpansionPanelContent>
        <mat-card>
          <mat-accordion [multi]="multiAccordion">
            Panel A
          </mat-accordion>
        </mat-card>
      </ng-template>
    </mat-expansion-panel>

    <!-- PANEL B -->
    <mat-expansion-panel
      *ngIf="ifDeveloper && (developerMode$ | async)"
      #panelB
      class="model-panel"
      (opened)="setEditorPanel(false, 'Panel B Opened')"
      (keyup.ENTER)="setEditorPanel(true, 'ACE PARENT keyup.ENTER')"
    >
      <mat-expansion-panel-header>
        <mat-panel-title>Panel B</mat-panel-title>
        <mat-panel-description></mat-panel-description>
      </mat-expansion-panel-header>
      <ng-template matExpansionPanelContent>
        <div
          ace-editor
          *ngIf="panelB.expanded"
          [text]="text$ | async"
          [options]="aceEditorOptions"
          [autoUpdateContent]="true"
          (textChanged)="updateModelFromEditor($event)"
          class="ace-editor-container"
          (keyup.ENTER)="setEditorPanel(true, 'ACE keyup.ENTER')"
        ></div>
      </ng-template>
  </mat-expansion-panel>
</mat-accordion>

这是打字稿类代码：

 editorPanelExpanded = true;

 setEditorPanel(value: boolean, from = '') {
   this.editorPanelExpanded = value;
   console.log(`setEditorPanelCalled from ${from} with value: ${value}`);
 }

启动应用程序时，面板 A 打开。然后，我单击面板 B 以自动展开它，这会自动导致面板 A 关闭。然后我在面板 B 的 ACE 编辑器中选择一些文本，然后单击 ENTER。此时，我按预期获得了 console.log，显示变量已更改，但面板 B 保持打开状态，面板 A 保持关闭状态。在这种情况下，我一定违反了垫式手风琴的某些规则，但我似乎不知道是什么。有人可以建议一种替代方法，或者告诉我当前的方法哪里出了问题吗？

编辑：我忘记添加也许重要的细节。我正在使用 onPush 更改检测。我即将在脚本中插入 detectorChanges() 来测试结果。

是的，CD 对行为没有影响。 A 组仍处于关闭状态。我可以让面板 B 在事件触发器上关闭，但面板 A 仍然保持关闭状态，尽管日志显示其 [expanded] 变量在折叠时为 true。

我花了几个小时对此进行了来回测试，但我没有办法尝试。

Answer 1

我终于让它发挥作用了。他们的关键是访问扩展面板的 .open() 方法。为了访问它，我必须设置一个对它的 viewChild 引用。

课堂上：

@ViewChild('editor') editor: MatExpansionPanel;

面板 A 有 viewChild #editor 参考：

<mat-expansion-panel #editor ...>

面板 B 具有调用该方法的 keyup.Enter 事件处理程序：

<mat-expansion-panel (keyup.ENTER)="openEditor()"

openEditor() 方法完成这项工作：

openEditor() { this.editor.open(); }