Angular 6迁移库项目报错：受保护属性仅可在类及其子类访问

这个问题我在帮团队从Angular 5迁移到6的时候碰到过好几次，本质是TypeScript版本升级带来的严格性变化，加上Angular CLI构建策略的调整导致的。我给你梳理下原因和可行的解决办法：

为什么会出现这个错误？ #

Angular 6配套的TypeScript版本升级到了2.7+，这个版本对类成员的可见性检查变得更加严格：

• TypeScript中private修饰的属性只能在定义它的类内部访问，子类（哪怕是直接继承的）都没有访问权限。
• 而Angular 5使用的TypeScript版本较低（一般是2.4或2.5），对私有属性的检查不够严格，允许子类访问父类的私有属性，所以之前没报错。
• 你看到的错误提示可能是翻译的小偏差，实际是编译器在提示：这些私有属性只能在NativeFormElementChild内部访问，子类InputDirective也无权访问（如果你的指令代码里用到了这些属性的话）。

具体解决办法 #

1. 将私有属性改为受保护（最推荐） #

既然InputDirective作为子类需要使用这些属性，把父类的private修饰符改成protected是最合理的选择。protected允许父类和所有子类访问这些属性，同时禁止外部代码/模板直接访问，完美符合你的封装需求：

abstract class NativeFormElementChild {
  protected _id: string;
  protected _required: boolean;
  protected _ariaDescribedBy: string;
  protected _ariaRequired: boolean;
  
  // 其他原有逻辑...
}

修改后，子类InputDirective可以正常使用这些属性，Angular 6的编译器也不会再触发错误。

2. 通过公共getter/setter暴露属性（适用于需要模板绑定的场景） #

如果你的模板需要直接绑定这些属性的值（比如把_id绑定到<input>的id属性），可以在父类中添加带@Input()装饰器的公共getter和setter，既保持内部属性的封装，又允许外部通过合法接口访问：

abstract class NativeFormElementChild {
  private _id: string;
  private _required: boolean;
  private _ariaDescribedBy: string;
  private _ariaRequired: boolean;

  @Input()
  get id(): string {
    return this._id;
  }
  set id(value: string) {
    this._id = value;
  }

  @Input()
  get required(): boolean {
    return this._required;
  }
  set required(value: boolean) {
    this._required = value;
  }

  // 为_ariaDescribedBy和_ariaRequired添加同样的getter/setter
}

然后在模板中使用公共属性名绑定：

<input [id]="id" [required]="required" appInput>

3. 临时降低TypeScript严格性（不推荐） #

如果暂时不想修改代码，可以在tsconfig.json中调整编译选项来绕过检查，但这只是临时方案，会失去TypeScript类型检查的优势，不建议长期使用：

在tsconfig.json的compilerOptions里添加或修改：

{
  "compilerOptions": {
    "strictPropertyInitialization": false,
    "noImplicitAny": false
    // 保留其他原有配置
  }
}

总结 #

Angular 6的升级带来了更严格的代码检查，虽然初期会遇到一些问题，但能让代码更健壮、可维护。优先推荐第一种解决方案，既符合TypeScript的设计规范，又能解决你的问题。

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