Question

考虑以下代码：

export class Hero {
    constructor(private id: number, private name: string) {}
}

@Component({
    selector: 'my-app',
    template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
})
export class AppComponent {
    private title = "Tour of Heroes";
    private hero: Hero = new Hero(1, "Windstorm");
}

在AppComponent的模板中，我写了hero.name，但根据Hero类，此字段是私有的，不应该是可访问的。这段代码如何编译和工作？我错过了什么吗？

编辑：阅读有关其发生原因的答案，这是我处理此问题的方式，它不是一个修复程序，但它可以使事情更有条理，并且安全，除了访问者总是好用之外：

export class Hero {
    constructor(private _id: number, private _name: string) { }

    get name(): string {
        return this._name;
    }

    get id(): number {
        return this._id;
    }
}

@Component({
    selector: 'my-app',
    template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
})
export class AppComponent {
    private title = "Tour of Heroes";
    private hero: Hero = new Hero(1, "Windstorm");
}

当在JS中执行hero.name时，它应该调用你在TS代码中定义的JS编译的getter函数，这应该在保持TS代码风格的同时对属性进行某种控制。

Answer 1

在JavaScript中没有私有变量这样的东西。类似于private的关键字仅由TypeScript转换器用于在转换之前强制执行约束。将代码转换为JavasScript后，name属性是Hero类的可见成员。

Answer 2

typescript中的JComponent关键字仅用于编译时检查，并且实际上并不限制在运行时访问任何内容。打字稿编译器不会检查你的模板，所以它没有解决问题。

我相信一些IDE（VS Code和WebStorm）正在对模板进行类型检查，但现在你自己就是

Answer 3

Angular2指出模板中的私有变量是正确的方式。请参阅备忘单：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter。

所以继续吧！并为您的组件启用封装，而不是将所有变量公开为公共。

私人成员可在角度2装饰者访问

3 个答案: