在Splitter面板中使用子组件触发ExpressionChangedAfterItHasBeenCheckedError求助

我有一个包含两个Syncfusion组件的Angular模块：MySplitterComponent和MyTreeGridComponent。MySplitterComponent用于定义分割面板布局，MyTreeGridComponent基于Syncfusion Essential JS 2 TreeGrid组件实现树形表格功能。控制台出现ExpressionChangedAfterItHasBeenCheckedError错误。

我尝试过以下两种方案，但均未解决问题：

• 通过AfterViewInit结合setTimeout(() => { ... }, 0)延迟MyTreeGridComponent的数据源绑定初始化
• 在ngAfterViewInit钩子中初始化组件属性

已创建最小可复现示例，寻求社区帮助排查问题。

Splitter组件代码 #

@Component({
  selector: 'my-splitter',
  template: ` <div
    id="container"
    style="height: 100%;">
    <ejs-splitter height="100%">
      <e-panes>
        <e-pane size="200px">
          <ng-template #content>
            <h3>1</h3>  
          </ng-template>
        </e-pane>
        <e-pane>
          <ng-template #content>
            <my-treegrid></my-treegrid>
          </ng-template>
        </e-pane>
      </e-panes>
    </ejs-splitter>
  </div>`,
})
export class MySplitterComponent {
  constructor() {}
}

TreeGrid组件代码 #

@Component({
  selector: 'my-treegrid',
  template: `
  <ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' hasChildMapping='isParent' parentIdMapping='ParentItem' idMapping='TaskID' 
    [allowPaging]="true"
    [toolbar]="toolbar"
    >
        <e-columns>
            <e-column field='TaskID' headerText='Task ID' width='90' textAlign='Right'></e-column>
            <e-column field='TaskName' headerText='Task Name' width='170'></e-column>
            <e-column field='StartDate' headerText='Start Date' width='130' format="yMd" textAlign='Right'></e-column>
            <e-column field='Duration' headerText='Duration' width='80' textAlign='Right'></e-column>
        </e-columns>
      </ejs-treegrid>`,
})
export class MyTreeGridComponent implements OnInit, AfterViewInit {
  public data: DataManager;
  public toolbar = ['Search'];

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {}

  ngAfterViewInit() {
    setTimeout(() => {
      this.toolbar = ['Search'];
      this.data = new DataManager({
        url: 'https://ej2services.syncfusion.com/production/web-services/api/SelfReferenceData',
        adaptor: new WebApiAdaptor(),
        crossDomain: true,
      });
      this.cdr.detectChanges();
    }, 0);
  }
}

AppModule模块代码 #

@NgModule({
  declarations: [AppComponent, MySplitterComponent, MyTreeGridComponent],
  imports: [CommonModule, BrowserModule, SplitterModule, TreeGridModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

内容的提问来源于stack exchange，提问作者Aruna101