private Mitglieder zugänglich sind in Winkeln 2 Dekorateure

Question

diesen Code vor:

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

In AppComponent ‚s Vorlage Ich schrieb hero.name jedoch dieses Feld nach der Hero Klasse ist privat und nicht zugänglich sein. Wie dieser Code kompiliert und funktioniert? Fehle ich etwas?

EDIT: Lesen Sie die Antworten auf, warum es passiert, hier ist meine Art und Weise der Umgang mit diesem, es ist kein fix, aber es hält die Dinge besser organisiert und sicher neben Accessoren sind immer gut zu nutzen:

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

Wenn hero.name in JS ausgeführt wird, sollte es die JS-kompilierte Getterfunktion aufrufen, die Sie in Ihrem TS-Code definiert haben, dies sollte eine Art Kontrolle über die Eigenschaften geben, während TS-Codestil beibehalten wird.

Answer 1

In JavaScript gibt es keine privaten Variablen. Schlüsselwörter wie private werden nur vom TypeScript-Transpiler verwendet, um Abhängigkeiten vor dem Transpilieren zu erzwingen. Sobald der Code in JavasScript übertragen wurde, ist die Eigenschaft name ein sichtbares Mitglied der Hero-Klasse.

Answer 2

Das Schlüsselwort private in Typescript wird nur für die Überprüfung der Kompilierzeit verwendet und beschränkt den Zugriff zur Laufzeit nicht wirklich auf irgendetwas. Der Typoskript-Compiler prüft Ihre Vorlagen nicht, sodass das Problem nicht erkannt wird.

Ich glaube, einige IDE (VS-Code und WebStorm) auf Typ arbeiten, um Ihre Vorlagen Überprüfung aber jetzt sind Sie an Ihrem eigenen

Answer 3

Angular2 Zustände beziehen private Variablen innerhalb von Vorlagen als korrekte Art und Weise. Siehe Spickzettel: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter.

Also los! Aktivieren Sie die Kapselung für Ihre Komponenten und stellen Sie nicht alle Variablen als öffentlich dar.