Angular 16中如何访问第三方库组件的私有属性？

问题背景 #

在Angular 16中使用@po-ui/ng-components的PoStepperComponent时，尝试通过继承组件的指令访问其私有属性currentActiveStep，遇到TypeScript错误：

TS2341: Property currentActiveStep is private and only accessible within class PoStepperComponent.

常规继承无法突破TypeScript的私有属性封装规则，且旧版Angular的AppViewManager等方法已废弃，需要寻找可行的替代方案。

可行解决方案 #

1. 优先使用组件公开API（最优解） #

先查阅PoStepperComponent的官方文档，确认是否有公开的属性/方法可以获取当前激活步骤——多数UI组件库会提供类似activeStep、currentStepIndex这类公开属性。如果存在，直接使用这些公开API，完全避免依赖私有属性：

export class ExtendedStepperDirective extends PoStepperComponent {
  get currentStepCustom() {
    // 假设组件有公开的activeStep属性，实际以官方文档为准
    return this.activeStep;
  }
}

这种方式最安全，不会因为库版本更新导致代码失效。

2. 类型断言绕过TypeScript检查（快速临时方案） #

如果组件没有提供对应的公开API，可以通过any类型断言绕过TypeScript的私有属性检查。注意：这种方法依赖组件内部实现，库更新时私有属性名可能变化，需自行承担维护风险：

export class ExtendedStepperDirective extends PoStepperComponent {
  get currentStepCustom() {
    // 用any断言绕过类型检查
    return (this as any).currentActiveStep;
  }
}

3. 采用组合模式替代继承（更灵活） #

不继承组件，而是创建指令并注入PoStepperComponent实例，通过类型断言访问私有属性。这种方式不需要替换组件的提供者，更符合Angular的依赖注入原则：

import { Directive, Host } from '@angular/core';
import { PoStepperComponent } from "@po-ui/ng-components";

@Directive({
  selector: '[appExtendedStepper]'
})
export class ExtendedStepperDirective {
  constructor(@Host() private readonly stepper: PoStepperComponent) {}

  get currentStepCustom() {
    // 访问注入的组件实例的私有属性
    return (this.stepper as any).currentActiveStep;
  }
}

4. 封装自定义组件（长期健壮方案） #

将PoStepperComponent封装成自己的组件，通过ViewChild获取实例并处理逻辑，对外暴露自定义API。这种方式隔离了对第三方库内部实现的依赖，后续库更新时只需修改封装层：

import { Component, ViewChild, Output, EventEmitter } from '@angular/core';
import { PoStepperComponent } from "@po-ui/ng-components";

@Component({
  selector: 'app-custom-stepper',
  template: `
    <po-stepper #stepper [p-steps]="steps" (p-change-step)="onStepChange($event)">
      <ng-content></ng-content>
    </po-stepper>
  `
})
export class CustomStepperComponent {
  @ViewChild('stepper') private readonly stepper!: PoStepperComponent;
  @Output() currentStepChange = new EventEmitter<number>();

  get currentStepCustom() {
    return (this.stepper as any).currentActiveStep;
  }

  onStepChange(event: any) {
    this.currentStepChange.emit(this.currentStepCustom);
  }
}

使用时直接用<app-custom-stepper>替代原生po-stepper，并通过currentStepCustom获取当前步骤。

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