Angolare2: le variabili private dovrebbero essere accessibili nel modello?

Se una variabile viene dichiarata privatesu una classe di componente, dovrei essere in grado di accedervi dal modello di quel componente?

@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
}

No, non dovresti usare variabili private nei tuoi modelli.

Mentre mi piace la risposta di Drewmoore e vedo la perfetta logica concettuale in essa, implementalmente è sbagliata. I modelli non esistono all'interno delle classi dei componenti, ma al di fuori di essi. Dai un'occhiata a questo repository per la prova.

L'unico motivo per cui funziona è perché la privateparola chiave di TypeScript non rende il membro privato. La compilazione just-in-time avviene in un browser in fase di runtime e JS non ha alcun concetto di membri privati ​​(ancora?). Il merito va a Sander Elias per avermi messo sulla strada giusta.

Con una ngccompilazione anticipata, otterrai errori se provi ad accedere ai membri privati ​​del componente dal modello. Clona il repository dimostrativo, modifica MyComponentla visibilità dei membri in privato e otterrai errori di compilazione durante l'esecuzione ngc. Ecco anche una risposta specifica per la compilazione Ahead-of-Time.

Modifica: questa risposta ora non è corretta. Non vi era alcuna guida ufficiale sull'argomento quando l'ho pubblicato, ma come spiegato nella risposta (eccellente e corretta) di @ Yaroslov, questo non è più il caso: Codelizer ora avverte e la compilazione di AoT fallirà sui riferimenti a variabili private nei modelli di componenti . Detto questo, a livello concettuale tutto qui rimane valido, quindi lascerò questa risposta come sembra essere stata utile.

Sì, questo è previsto.

Tieni presente che privatee altri modificatori di accesso sono costrutti Typescript, mentre Componente / controller / modello sono costrutti angolari di cui Typescript non sa nulla. I modificatori di accesso controllano la visibilità tra le classi: la creazione di un campo privateimpedisce ad altre classi di accedervi, ma modelli e controller sono elementi che esistono all'interno delle classi.

Questo non è tecnicamente vero, ma (al posto di capire come le classi si relazionano con i decoratori e i loro metadati), potrebbe essere utile pensarlo in questo modo, perché l'importante (IMHO) è passare dal pensare a template e controller come separati le entità nel pensare a loro come parti unificate del costrutto Componente - questo è uno dei principali aspetti del modello mentale ng2.

Pensandolo in questo modo, ovviamente ci aspettiamo che le privatevariabili su una classe componente siano visibili nel suo modello, per lo stesso motivo per cui ci aspettiamo che siano visibili nei privatemetodi su quella classe.

Anche se l'esempio di codice indica che la domanda riguarda TypeScript, non ha il dattiloscrittoetichetta. Angular2 è disponibile anche per Dart e questa è una differenza notevole rispetto a Dart.

In Dart il modello non può fare riferimento a variabili private della classe del componente, poiché Dart in contrasto con TypeScript impedisce efficacemente l'accesso di membri privati ​​dall'esterno.

Ritengo ancora il suggerimento di @drewmoores di pensare al componente e al suo modello come un'unità.

Aggiornamento (TS) Sembra che con la compilazione offline l'accesso alle proprietà private diventerà più limitato anche in Angular2 TS https://github.com/angular/angular/issues/11422

Le variabili private possono essere utilizzate nel modello del componente. Vedi il cheat-sheet angular2 per la guida: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter

Una spiegazione più dettagliata dei membri pubblici / privati ​​delle classi in dattiloscritto è disponibile qui: https://www.typescriptlang.org/docs/handbook/classes.html .

Tutti i membri per impostazione predefinita sono pubblici. È possibile accedere ai membri pubblici dall'esterno della classe componente insieme all'istanza di classe. Ma i membri privati ​​sono accessibili solo all'interno delle funzioni dei membri della classe.

Una soluzione alternativa potrebbe essere l'utilizzo di variabili private nel file ts e l'utilizzo di getter.

private _userName = "Test Name";
get userName() {
  return this._userName;
}

Questo è un buon approccio perché il file ts e l'html rimangono indipendenti. Anche se si modifica il nome della variabile _userName nel file ts, non è necessario apportare alcuna modifica al file modello.

La risposta breve è no, non dovresti essere in grado di accedere ai membri privati ​​dal modello perché è tecnicamente separato dal file TS.

In tsconfig.app.json se fornisci l'opzione 'fullTemplateTypeCheck' nelle opzioni del compilatore puoi vedere tutti i riferimenti non validi nei file html del tuo progetto al momento della creazione del progetto.

"angularCompilerOptions": {
"enableIvy": true,
"fullTemplateTypeCheck": true

}