Angular中扩展第三方组件：自定义封装AgGridAngular的正确方式

你当前问题的核心是：继承AgGridAngular后，又在自定义组件模板中嵌套了独立的<ag-grid-angular>实例。继承来的属性（如animateRows）被赋值给了CustomGridComponent本身，但模板里的<ag-grid-angular>是另一个完全独立的组件实例，两者没有关联，所以属性无法生效。

以下是两种正确的实现方案：

方案一：直接复用父类渲染逻辑（推荐） #

因为CustomGridComponent已经继承了AgGridAngular，它本身就是一个完整的AgGrid组件实例，不需要在模板中再声明<ag-grid-angular>。

1. 修改组件模板 #

模板可以为空，或仅添加自定义包裹布局（无需嵌套AgGrid）：

<!-- grid.component.html -->
<div class="custom-grid-wrapper">
  <!-- 父类AgGridAngular会自动渲染网格到这里 -->
</div>

2. 调整组件代码 #

继承父类后，直接在自定义组件中添加业务逻辑即可，父类已处理网格渲染：

@Component({
  selector: 'custom-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.scss'],
  providers:[AngularFrameworkOverrides, AngularFrameworkComponentWrapper]
})
export class CustomGridComponent extends AgGridAngular implements OnInit {
  rowData$: Observable<any[]>;

  constructor(
    private http: HttpClient, 
    elementRef : ElementRef, 
    viewContainerRef: ViewContainerRef, 
    angularFrameworkOverrides : AngularFrameworkOverrides,
    angFrameworkComponentWrapper : AngularFrameworkComponentWrapper,
    componentFactoryResolver : ComponentFactoryResolver
  ) {
    super(elementRef, viewContainerRef, angularFrameworkOverrides, angFrameworkComponentWrapper, componentFactoryResolver);
  }

  ngOnInit(): void {
    // 自定义业务逻辑：比如从后端获取数据
    this.rowData$ = this.http.get<any[]>('/api/data');
    this.rowData = this.rowData$;
  }
}

3. 使用自定义组件 #

现在可以直接像原生AgGrid一样传入所有属性，无需额外定义@Input：

<custom-grid 
  [animateRows]="true"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [rowData]="rowData$ | async"
></custom-grid>

方案二：嵌套AgGrid时自动同步属性 #

如果必须在模板中嵌套<ag-grid-angular>（比如需要复杂布局），可以通过监听属性变化自动同步到内部实例：

1. 组件代码 #

@Component({
  selector: 'custom-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.scss'],
  providers:[AngularFrameworkOverrides, AngularFrameworkComponentWrapper]
})
export class CustomGridComponent extends AgGridAngular implements OnInit, OnChanges {
  @ViewChild(AgGridAngular) private innerGrid!: AgGridAngular;
  rowData$: Observable<any[]>;

  constructor(
    private http: HttpClient, 
    elementRef : ElementRef, 
    viewContainerRef: ViewContainerRef, 
    angularFrameworkOverrides : AngularFrameworkOverrides,
    angFrameworkComponentWrapper : AngularFrameworkComponentWrapper,
    componentFactoryResolver : ComponentFactoryResolver
  ) {
    super(elementRef, viewContainerRef, angularFrameworkOverrides, angFrameworkComponentWrapper, componentFactoryResolver);
  }

  ngOnInit(): void {
    this.rowData$ = this.http.get<any[]>('/api/data');
  }

  ngOnChanges(changes: SimpleChanges): void {
    // 将所有变化的属性同步到内部AgGrid实例
    Object.keys(changes).forEach(key => {
      if (key !== 'rowData$') {
        (this.innerGrid as any)[key] = (this as any)[key];
      }
    });
  }
}

2. 模板代码 #

保持原有嵌套结构即可：

<ag-grid-angular
   [columnDefs]="columnDefs"
   [defaultColDef]="defaultColDef"
   [rowData]="rowData$ | async"
></ag-grid-angular>

这种方式会自动同步所有继承自AgGridAngular的属性，无需逐个定义@Input。

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