在angular 2 decorator中可以访问私有成员

private members are accessible in angular 2 decorators

本文关键字：访问 成员 angular decorator      更新时间：2023-09-26

考虑以下代码：

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");
}

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

在JavaScript中没有私有变量这回事。像private这样的关键字只是由TypeScript转译器用于在转译之前强制执行约束。一旦代码被转换成JavasScript，name属性就是Hero类的可见成员。

typescript中的private关键字仅用于编译时检查，在运行时实际上并不限制对任何内容的访问。typescript编译器没有检查你的模板，所以它没有发现问题。

我相信一些IDE（VS Code和WebStorm）正在对您的模板进行类型检查，但目前您正在使用自己的

Angular2声明在模板中引用私有变量是正确的方式。请参阅备忘单：https://angular.io/docs/ts/latest/cookbook/component-communication.html##父到子setter。

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

相关文章：