Angular2 - 应该在模板中访问私有变量吗？

如果private在组件类上声明了变量,我是否应该能够在该组件的模板中访问它？

@Component({
  selector: 'my-app',
  template: `
    

      
{{title}}
      
Hello {{userName}}
 // I am getting this name
    
  `,
})
export class App {
  public title = 'Angular 2';
  private userName = "Test Name"; //declared as private
}

Yaroslav Adm.. 202

不,您不应该在模板中使用私有变量.

虽然我喜欢drewmoore的答案并且在其中看到完美的概念逻辑,但是在实施方面却是错误的.模板在组件类中不存在,但在它们之外.看看这个回购的证据.

它工作的唯一原因是因为TypeScript的private关键字并不真正使成员成为私有.实时编译在运行时在浏览器中进行,JS没有任何私有成员的概念(但是？).幸得桑德埃利亚斯为把我在正确的轨道上.

使用ngc和Ahead-of-Time编译时,如果尝试从模板访问组件的私有成员,则会出现错误.克隆演示存储库,将MyComponent成员的可见性更改为私有,并且在运行时将出现编译错误ngc.这里也是针对Ahead-of-Time编译的具体答案.

1> Yaroslav Adm..：

---

不,您不应该在模板中使用私有变量.

虽然我喜欢drewmoore的答案并且在其中看到完美的概念逻辑,但是在实施方面却是错误的.模板在组件类中不存在,但在它们之外.看看这个回购的证据.

它工作的唯一原因是因为TypeScript的private关键字并不真正使成员成为私有.实时编译在运行时在浏览器中进行,JS没有任何私有成员的概念(但是？).幸得桑德埃利亚斯为把我在正确的轨道上.

使用ngc和Ahead-of-Time编译时,如果尝试从模板访问组件的私有成员,则会出现错误.克隆演示存储库,将MyComponent成员的可见性更改为私有,并且在运行时将出现编译错误ngc.这里也是针对Ahead-of-Time编译的具体答案.

---

这是最好的评论,imo应该是接受的答案.这不是你可以使用私有变量一旦转换,你应该..保持代码干净!

---

我唯一的问题是,你如何区分实际的公开公开成员,如@Inputs和Outputs,我们只希望暴露给我们的模板,而不是外部世界.如果要构建可重用组件,希望方法/成员可以访问模板,而不是其他组件.我认为原来的答案是正确的.模板是组件的一部分.

---

这是唯一有效的答案!Codelyzer现在会在您的模板中使用private var时向您发出警告.

2> drew moore..：

---

编辑:此答案现在不正确.当我发布该主题时没有关于该主题的官方指导,但正如@ Yaroslov(优秀且正确)答案中所解释的那样,现在不再是这样了:Codelizer现在警告并且AoT编译将在组件模板中引用私有变量时失败.也就是说,从概念上讲,这里的一切都是有效的,所以我会把这个答案留下来,因为它似乎很有帮助.

---

是的,这是预料之中的.

请记住,private其他访问修饰符是Typescript构造,而Component/controller/template是Typescript一无所知的角度构造.访问修饰符控制类之间的可见性:创建字段private可防止其他类访问它,但模板和控制器是类中存在的内容.

这在技术上并不正确,但(代替理解类与装饰器及其元数据的关系),以这种方式思考它可能会有所帮助,因为重要的是(恕我直言)从思考模板和控制器转变为单独的实体将它们视为Component构造的统一部分 - 这是ng2心理模型的主要方面之一.

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

---

我同意组件模型无法看到它的私有变量没有意义,它们应该在编译期间被嵌入到同一个类中,我的意思是,你必须公开组件特定的特征,对象和函数所有其他组件,以便您可以在模板中使用它们,更不用说外部调整或调用这些组件可能会导致最终组件出现潜在的意外行为

---

首先,我认为就像你画画一样.但我将tslint升级到4.02并将codelyzer升级到2.0.0-beta.1并且我在访问视图中的变量时遇到错误,说我不能使用private.所以@ Yaroslav的答案似乎更合适.

---

我讨厌投票否决您的答案，所以我不会这样做。但我希望您可以参考@Yaroslav的答案来学习麻袋。

3> Günter Zöchb..：

---

尽管代码示例表明问题与TypeScript有关,但它没有typescript标记.Angular2也适用于Dart,这与Dart有显着差异.

在Dart中,模板不能引用组件类的私有变量,因为与TypeScript相比,Dart有效地阻止了私有成员从外部访问.

我仍然支持@drewmoores建议考虑组件和它的模板作为一个单元.

更新(TS) 似乎离线编译访问私有属性将在Angular2 TS中变得更加有限以及https://github.com/angular/angular/issues/11422

---

是否有可能使用Typescript编译器限制视图可访问的私有变量？

---

我认为将它们私有化会影响组件的可测性吗？例如,如果我在测试的上下文中创建一个组件,我将无法从我的测试中调用这些私有方法来确认模板/类交互是否正常工作.我还没试过这个,所以请原谅我,如果这是显而易见的:)