私人成員可使用angular 2裝飾器訪問

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

當hero.name將在JS中執行時，應調用您在TS代碼中定義的JS編譯的getter函數，這應在保持TS代碼樣式的同時對屬性進行某種控制。

Answer 1

在JavaScript中，沒有私有變量之類的東西。 TypeScript轉譯器僅使用諸如private類的關鍵字在轉譯前強制執行約束。 將代碼轉換為JavasScript之后， name屬性是Hero類的可見成員。

Answer 2

typescript中的private關鍵字僅用於編譯時檢查，實際上並不限制運行時對任何內容的訪問。 打字稿編譯器沒有檢查您的模板，因此沒有發現問題。

我相信某些IDE（VS Code和WebStorm）正在對模板進行類型檢查，但是目前您是一個人。

Answer 3

Angular2指出在模板中引用私有變量是正確的方法。 請參閱備忘單： https : //angular.io/docs/ts/latest/cookbook/component-communication.html# !#parent-to-child- setter 。

所以請繼續！ 並啟用對組件的封裝，而不將每個變量都公開。