Angular中动态隐藏BPMN库生成的djs-palette-entries面板

针对你遇到的动态生成元素无法通过@ViewChild获取的问题，有三种可行方案：

方案一：全局CSS配合组件动态类控制 #

因为元素是BPMN库动态生成的，无法通过组件模板引用获取，你可以用全局样式配合组件容器的动态类来控制显示：

1. 在组件的styles中添加全局穿透样式（以Angular为例，用::ng-deep）：

::ng-deep .hide-bpmn-palette .djs-palette-entries {
  display: none !important;
}

2. 在BPMN容器元素上绑定动态类：

<div #bpmnContainer [class.hide-bpmn-palette]="isPaletteHidden"></div>

3. 在TypeScript中通过isPaletteHidden变量动态切换：

isPaletteHidden = false;

togglePalette() {
  this.isPaletteHidden = !this.isPaletteHidden;
}

方案二：BPMN初始化完成后动态操作DOM #

等BPMN库完成流程图渲染后，直接通过DOM选择器获取元素并修改样式：

import BpmnModeler from 'bpmn-js/lib/Modeler';

// 保存面板元素的引用
private paletteElement: HTMLElement | null = null;
isPaletteHidden = false;

initBpmnModeler() {
  const modeler = new BpmnModeler({
    container: '#bpmnContainer'
  });

  modeler.importXML(yourBpmnXml, (err) => {
    if (!err) {
      // 渲染完成后获取面板元素
      this.paletteElement = document.querySelector('.djs-palette-entries') as HTMLElement;
      // 初始隐藏
      if (this.paletteElement) {
        this.paletteElement.style.display = 'none';
        this.isPaletteHidden = true;
      }
    }
  });
}

togglePalette() {
  if (this.paletteElement) {
    this.paletteElement.style.display = this.isPaletteHidden ? 'block' : 'none';
    this.isPaletteHidden = !this.isPaletteHidden;
  }
}

方案三：使用BPMN库原生API控制显示（推荐） #

大部分BPMN库（比如bpmn-js）自带调色板的显示隐藏API，直接调用比操作DOM更可靠：

1. 初始化时禁用调色板（如果不需要默认显示）：

const modeler = new BpmnModeler({
  container: '#bpmnContainer',
  palette: {
    enabled: false
  }
});

2. 动态切换显示隐藏：

private bpmnModeler: BpmnModeler | null = null;
isPaletteHidden = false;

initBpmnModeler() {
  this.bpmnModeler = new BpmnModeler({
    container: '#bpmnContainer'
  });

  // 导入XML完成后可以执行切换操作
}

togglePalette() {
  if (this.bpmnModeler) {
    const palette = this.bpmnModeler.get('palette');
    if (this.isPaletteHidden) {
      palette.show();
    } else {
      palette.hide();
    }
    this.isPaletteHidden = !this.isPaletteHidden;
  }
}

内容的提问来源于stack exchange，提问作者Vinícius Henrique Rocha da Luz