如果在组件类上声明了变量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
}
【问题讨论】：
标签： typescript angular angular2-template
编辑：这个答案现在不正确。我发布它时没有关于该主题的官方指导，但正如 @Yaroslov 的（优秀且正确）答案中所解释的，这不再是案例：Codelizer 现在会发出警告，并且 AoT 编译将在组件模板中引用私有变量时失败。也就是说，在概念层面上，这里的一切都仍然有效，所以我会留下这个答案，因为它似乎很有帮助。
是的，这是意料之中的。
请记住，private 和其他访问修饰符是 Typescript 构造，而 Component/controller/template 是 Typescript 一无所知的角度构造。访问修饰符控制 类之间的可见性：创建字段 private 可防止 其他类 访问它，但模板和控制器是存在于 内 的东西em> 类。
这在技术上并不正确，但是（代替理解类与装饰器及其元数据的关系），以这种方式考虑它可能会有所帮助，因为重要的事情（恕我直言）是从考虑模板和控制器作为单独的实体，将它们视为组件构造的统一部分——这是 ng2 心智模型的主要方面之一。
这样想，显然我们希望组件类上的private 变量在其模板中可见，出于同样的原因，我们希望它们在该类的private 方法中可见。
【讨论】：
尽管代码示例表明问题是关于 TypeScript，但它没有 typescript 标记。 Angular2 也可用于 Dart，这是与 Dart 的显着区别。
在Dart中，模板不能引用组件类的私有变量，因为与TypeScript相比，Dart有效地阻止了来自外部的私有成员的访问。
我仍然支持@drewmoores 的建议，将组件和模板作为一个单元来考虑。
更新 (TS) 似乎在 Angular2 TS 以及 https://github.com/angular/angular/issues/11422987654322@
【讨论】：
不，您不应该在模板中使用私有变量。
虽然我喜欢 drewmoore's answer 并看到其中完美的概念逻辑，但在实现方面它是错误的。模板不存在于组件类中，而是存在于它们之外。看看this repo 的证明。
它起作用的唯一原因是 TypeScript 的 private 关键字并没有真正将成员设为私有。即时编译发生在运行时的浏览器中，并且 JS 没有任何私有成员的概念（还没有？）。感谢 Sander Elias 让我走上正轨。
使用ngc 和Ahead-of-Time 编译，如果您尝试从模板访问组件的私有成员，您会遇到错误。克隆演示库，将MyComponent 成员的可见性更改为私有，运行ngc 时会出现编译错误。这里还有 answer 专用于 Ahead-of-Time 编译。
【讨论】：
私有变量可以在组件的模板中使用。参考 angular2 备忘单：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter
关于 typescript 中类的公共/私有成员的更详细解释可以在这里找到：https://www.typescriptlang.org/docs/handbook/classes.html。
默认情况下所有成员都是公开的。公共成员可以与类实例一起从组件类外部访问。但是 Private 成员只能在类成员函数中访问。
【讨论】：
一种解决方法是在 ts 文件中使用私有变量并使用 getter。
private _userName = "Test Name";
get userName() {
return this._userName;
}
这是一个很好的方法，因为 ts 文件和 html 保持独立。即使更改ts文件中的_userName变量名，也不必在模板文件中进行任何更改。
【讨论】：
private _name = '';
简短的回答是不，您不应该能够从模板访问私有成员，因为它在技术上与 TS 文件分离。
【讨论】：
在 tsconfig.app.json 中，如果您在编译器选项中提供 'fullTemplateTypeCheck' 选项，您可以在项目构建时看到项目的 html 文件中的所有无效引用。
"angularCompilerOptions": {
"enableIvy": true,
"fullTemplateTypeCheck": true
}
【讨论】：
我知道这有点晚了，但我从 Angular2 开始就一直在关注这个问题，最后我想出了一个很好的解决方法，让我有很好的适当组件 API 并且能够通过适当的类型检查从模板访问其中的私有字段：
export interface MyComponentPrivateProperties {
_label: string;
}
export class MyComponent {
private _label: string = 'Label';
public get view(): MyComponentPrivateProperties {
return this as any;
}
}
<div>{{view._label}}</div>
通过这种方式，如您所见，我们甚至可以在 html 模板中进行类型检查以及我们需要的所有内容以及组件的适当 API。如果在另一个组件中我们像这样引用MyComponent 类：
export class OtherComponent {
private _m: MyComponent;
ngOnInit() {
// here, this._label is not visible.
}
}
我们会注意到属性_label 不可见。
当然，请注意MyComponent 类不应实现接口MyComponentPrivateProperties。此接口将没有实现。这只是对角度 ngc 编译器的描述。它在编译时告诉编译器哪些是可以从模板访问的私有属性，然后在运行时消失。
【讨论】：