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

如果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
}

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

虽然我喜欢drewmoore的答案，并在其中看到了完美的概念逻辑，但在实现上却是错误的。模板不存在于组件类中，而是在它们之外。看看这个回购作为证明。

它起作用的唯一原因是因为TypeScript的private关键字并未真正使成员私有。即时编译在运行时在浏览器中进行，并且JS没有任何私有成员的概念（还可以吗？）。幸得桑德埃利亚斯为把我在正确的轨道上。

使用“ ngc和提前”编译，如果尝试从模板访问组件的私有成员，则会出现错误。克隆演示仓库，将MyComponent成员的可见性更改为private，运行时会遇到编译错误ngc。这也是提前编译的特定答案。

编辑：此答案现在不正确。我在发布该主题时没有官方指导，但正如@Yaroslov的（出色而正确的）答案中所述，情况已不再如此：Codelizer现在发出警告，并且在组件模板中引用私有变量时AoT编译将失败。就是说，从概念上讲，这里的所有内容仍然有效，因此我将保留这个答案，因为它似乎很有帮助。

是的，这是预期的。

请记住，private和其他访问修饰符是Typescript构造，而Component / controller / template是Typescript一无所知的角度构造。访问修饰符控制可视性之间类：制作领域private防止其他类有机会接触到它，但模板和控制器是存在的事情中的类。

从技术上讲，这不是正确的，但是（代替理解类与装饰器及其元数据的关系），以这种方式思考可能会有所帮助，因为重要的是（IMHO）不再将模板和控制器视为独立实体将其视为Component构造的统一部分-这是ng2心理模型的主要方面之一。

以这种方式考虑，显然，我们希望private组件类中的变量在其模板中可见，出于同样的原因，我们希望它们在private该类的方法中可见。

即使代码示例表明问题是关于TypeScript的，也没有 打字稿标签。Angular2也可用于Dart，这与Dart有显着差异。

在Dart中，模板无法引用组件类的私有变量，因为与TypeScript相比，Dart有效地防止了从外部访问私有成员。

我仍然支持@drewmoores建议，将组件及其模板作为一个单元来考虑。

更新（TS） 似乎通过脱机编译对Angular2 TS中的私有属性的访问也会变得更加受限https://github.com/angular/angular/issues/11422

私有变量可以在组件模板中使用。请参阅angular2备忘单以获取指南：https ://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter

可以在以下位置找到有关typescript中的公共/私有类成员的更详细说明：https : //www.typescriptlang.org/docs/handbook/classes.html。

默认情况下，所有成员都是公共成员。可以从组件类外部访问公共成员以及类实例。但是只能在类成员函数内访问私有成员。

解决方法是在ts文件中使用私有变量并使用getter。

private _userName = "Test Name";
get userName() {
  return this._userName;
}

这是个好方法，因为ts文件和html保持独立。即使您在ts文件中更改了_userName变量名，也不必在模板文件中进行任何更改。

简短的答案是：否，您不应该从模板访问私有成员，因为它在技术上与TS文件是分开的。

在tsconfig.app.json中，如果在编译器选项中提供了“ fullTemplateTypeCheck”选项，则在项目构建时可以在项目的html文件中看到所有无效引用。

"angularCompilerOptions": {
"enableIvy": true,
"fullTemplateTypeCheck": true

}