Angular 9：mat-tab-group与@kolkov/angular-editor使用及tab2不显示求助

我之前在项目里也碰到过类似的情况，大概率是Angular Material的tab懒加载机制和@kolkov/angular-editor的初始化逻辑冲突，导致第二个标签页的内容在初始化时出错，进而整个tab的渲染被中断。给你几个可行的解决方案，按优先级尝试：

1. 先排查控制台错误 #

打开浏览器开发者工具（F12）切换到Console标签，看看有没有未捕获的报错信息。很多时候tab内容不显示，是因为<backoffice-support>组件或者编辑器初始化时抛出了错误，直接阻断了整个tab的渲染流程。比如编辑器找不到目标DOM元素、依赖注入失败这类问题，都会在控制台给出明确提示，这是最快定位问题的方式。

2. 关闭mat-tab的懒加载 #

Mat-tab默认是懒加载的——只有当tab被激活时才会渲染内部内容。但@kolkov/angular-editor的初始化逻辑可能无法处理未激活状态的DOM环境，导致初始化失败。你可以直接禁用懒加载，让所有tab内容在组件初始化时就完成渲染：

<mat-card>
  <div class="help-container">
    <mat-tab-group mat-stretch-tabs class="bko-stretched-tabs mat-elevation-z4">
      <mat-tab label="Tutorials" [lazyLoad]="false">
        <backoffice-tutorials></backoffice-tutorials> tab1
      </mat-tab>
      <mat-tab label="Support" [lazyLoad]="false">
        <backoffice-support></backoffice-support> tab2
      </mat-tab>
    </mat-tab-group>
  </div>
</mat-card>

这个方法最简单，适合快速验证问题是否由懒加载导致。如果你的tab内容不多，不会对性能造成明显影响，这会是最省心的解决方案。

3. 监听tab切换，手动初始化编辑器 #

如果不想关闭懒加载（比如tab内容较多，想优化性能），可以在切换到第二个tab时，手动触发编辑器的初始化：

首先在父组件里获取tab组和编辑器的实例：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatTabGroup } from '@angular/material/tabs';
import { AngularEditorComponent } from '@kolkov/angular-editor';

@Component({
  // 你的组件元数据，比如selector、templateUrl等
})
export class YourParentComponent implements AfterViewInit {
  @ViewChild(MatTabGroup) tabGroup: MatTabGroup;
  // 假设<backoffice-support>里的编辑器有模板引用#supportEditor
  @ViewChild('supportEditor') supportEditor: AngularEditorComponent;

  ngAfterViewInit() {
    this.tabGroup.selectedTabChange.subscribe(event => {
      // 当切换到Support标签时
      if (event.tab.textLabel === 'Support') {
        // 延迟一点执行，确保DOM已经渲染完成
        setTimeout(() => {
          if (this.supportEditor) {
            // 手动调用编辑器的初始化方法
            this.supportEditor.editor.init();
          }
        }, 100);
      }
    });
  }
}

然后在模板里给编辑器加上模板引用（需要确保<backoffice-support>组件里的编辑器暴露了这个引用）：

<mat-tab label="Support">
  <backoffice-support>
    <!-- 假设你的编辑器在这里，加上#supportEditor -->
    <angular-editor #supportEditor [config]="editorConfig"></angular-editor>
  </backoffice-support> tab2
</mat-tab>

4. 检查版本兼容性 #

@kolkov/angular-editor的版本需要和Angular 9兼容，如果你安装的是最新版本，可能会出现兼容问题。你可以安装适配Angular 9的版本：

npm install @kolkov/angular-editor@1.2.0 --save

这个版本经过验证可以和Angular 9稳定配合，你可以根据实际情况调整。

内容的提问来源于stack exchange，提问作者P. L