typescript - Angular2 - 私有(private)变量是否可以在模板中访问？

Question

如果一个变量在组件类上被声明为 private，我是否应该能够在该组件的模板中访问它？

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>{{title}}</h2>
      <h2>Hello {{userName}}</h2> // I am getting this name
    </div>
  `,
})
export class App {
  public title = 'Angular 2';
  private userName = "Test Name"; //declared as private
}

Answer 1

UPD

从 Angular 14 开始，它是 possible在模板中绑定(bind) protected 组件成员。这应该部分解决将内部状态(应该只能由模板访问)作为组件的公共(public) API 公开的问题。

---

不，您不应该在模板中使用私有(private)变量。

虽然我喜欢 drewmoore's answer并在其中看到完美的概念逻辑，在实现方面是错误的。模板不存在于组件类中，而是存在于它们之外。看看this repo为证明。

它起作用的唯一原因是因为 TypeScript 的 private 关键字并没有真正使成员私有(private)。即时编译发生在运行时的浏览器中，而 JS 没有任何私有(private)成员的概念(还没有？)。归功于Sander Elias让我走上正轨。

使用 ngc 和提前编译，如果您尝试从模板访问组件的私有(private)成员，您将遇到错误。克隆演示 repo，将 MyComponent 成员的可见性更改为私有(private)，运行 ngc 时会出现编译错误。这里还有answer特定于提前编译。