Angular2 - sollten private Variablen in der Vorlage zugänglich sein?

Wenn eine Variable für privateeine Komponentenklasse deklariert ist , sollte ich in der Vorlage dieser Komponente darauf zugreifen können?

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

Nein, Sie sollten keine privaten Variablen in Ihren Vorlagen verwenden.

Während ich die Antwort des Drawmoore mag und darin eine perfekte konzeptionelle Logik sehe, ist die Implementierung falsch. Vorlagen existieren nicht innerhalb von Komponentenklassen, sondern außerhalb von ihnen. Schauen Sie sich dieses Repo für den Beweis an.

Der einzige Grund, warum es funktioniert, ist, dass das privateSchlüsselwort von TypeScript das Mitglied nicht wirklich privat macht. Die Just-in-Time-Kompilierung erfolgt zur Laufzeit in einem Browser, und JS hat (noch?) Kein Konzept für private Mitglieder. Dank geht an Sander Elias , der mich auf den richtigen Weg gebracht hat.

Mit ngcund Ahead-of-Time-Kompilierung werden Fehler angezeigt, wenn Sie versuchen, über eine Vorlage auf private Mitglieder der Komponente zuzugreifen. Klonen Sie das Demonstrations-Repo, ändern Sie MyComponentdie Sichtbarkeit der Mitglieder in "Privat", und beim Ausführen werden Kompilierungsfehler angezeigt ngc. Hier finden Sie auch eine Antwort speziell für die Ahead-of-Time-Kompilierung.

Bearbeiten: Diese Antwort ist jetzt falsch. Als ich es veröffentlichte, gab es keine offizielle Anleitung zu diesem Thema, aber wie in der Antwort von @ Yaroslov (ausgezeichnet und korrekt) erläutert, ist dies nicht mehr der Fall: Codelizer warnt jetzt und die AoT-Kompilierung schlägt bei Verweisen auf private Variablen in Komponentenvorlagen fehl . Auf konzeptioneller Ebene bleibt hier jedoch alles gültig, daher lasse ich diese Antwort offen, da sie hilfreich zu sein scheint.

Ja, das wird erwartet.

Beachten Sie, dass privateund andere Zugriffsmodifikatoren Typescript-Konstrukte sind, während Component / Controller / Template eckige Konstrukte sind, von denen Typescript nichts weiß. Zugriffsmodifikatoren steuern die Sichtbarkeit zwischen Klassen: Durch das Erstellen eines Felds wird privateverhindert, dass andere Klassen darauf zugreifen können. Vorlagen und Controller sind jedoch in Klassen vorhanden.

Das ist technisch nicht wahr, aber (anstatt zu verstehen, wie Klassen sich auf Dekorateure und ihre Metadaten beziehen), könnte es hilfreich sein, dies so zu betrachten, da es wichtig ist (IMHO), nicht mehr getrennt von Vorlage und Controller zu denken Entitäten, die sie als einheitliche Teile des Komponentenkonstrukts betrachten - dies ist einer der Hauptaspekte des ng2-Mentalmodells.

Wenn wir so denken, erwarten wir natürlich, dass privateVariablen in einer Komponentenklasse in ihrer Vorlage sichtbar sind, aus demselben Grund, aus dem wir erwarten, dass sie in den privateMethoden in dieser Klasse sichtbar sind .

Obwohl das Codebeispiel angibt, dass es sich bei der Frage um TypeScript handelt, verfügt sie nicht über die TyposkriptEtikett. Angular2 ist auch für Dart verfügbar und dies ist ein bemerkenswerter Unterschied zu Dart.

In Dart kann die Vorlage nicht auf private Variablen der Komponentenklasse verweisen , da Dart im Gegensatz zu TypeScript den Zugriff privater Mitglieder von außen effektiv verhindert.

Ich unterstütze immer noch den Vorschlag von @drewmoores, über die Komponente und ihre Vorlage als eine Einheit nachzudenken.

Update (TS) Mit der Offline-Kompilierung scheint der Zugriff auf private Eigenschaften auch in Angular2 TS eingeschränkt zu werden. Https://github.com/angular/angular/issues/11422

Private Variablen können innerhalb der Vorlage der Komponente verwendet werden. Eine Anleitung finden Sie im Angular2-Spickzettel: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter

Eine ausführlichere Erklärung zu öffentlichen / privaten Mitgliedern von Klassen in Typoskript finden Sie hier: https://www.typescriptlang.org/docs/handbook/classes.html .

Alle Mitglieder sind standardmäßig öffentlich. Auf öffentliche Mitglieder kann von außerhalb der Komponentenklasse zusammen mit der Klasseninstanz zugegriffen werden. Auf private Mitglieder kann jedoch nur innerhalb der Klassenmitgliedsfunktionen zugegriffen werden.

Eine Problemumgehung könnte darin bestehen, private Variablen in der ts-Datei und Getter zu verwenden.

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

Dies ist ein guter Ansatz, da die ts-Datei und der HTML-Code unabhängig bleiben. Selbst wenn Sie den Variablennamen _userName in der Datei ts ändern, müssen Sie keine Änderungen an der Vorlagendatei vornehmen.

Die kurze Antwort lautet: Nein, Sie sollten nicht über die Vorlage auf private Mitglieder zugreifen können, da diese technisch von der TS-Datei getrennt ist.

Wenn Sie in tsconfig.app.json die Option 'fullTemplateTypeCheck' in den Compileroptionen angeben, werden alle ungültigen Verweise in HTML-Dateien Ihres Projekts zum Zeitpunkt der Projekterstellung angezeigt.

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

}}