Angular2-テンプレートでプライベート変数にアクセスできる必要がありますか？

変数がprivateコンポーネントクラスで宣言されている場合、そのコンポーネントのテンプレートで変数にアクセスできますか？

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

いいえ、テンプレートでプライベート変数を使用するべきではありません。

私はドリュームーアの答えを気に入っており、その中に完璧な概念的ロジックが見られますが、実装に関しては間違っています。テンプレートはコンポーネントクラス内には存在せず、それらの外部に存在します。このレポを見てください証明のためを。

これが機能する唯一の理由は、TypeScriptのprivateキーワードは実際にはメンバーを非公開にしないためです。ジャストインタイムのコンパイルは実行時にブラウザーで行われ、JSにはプライベートメンバーの概念が（まだ？）ありません。クレジットは私を正しい軌道に乗せたサンダーエリアスに行きます。

ngcし、事前コンパイラは、テンプレートからコンポーネントのプライベートメンバーにアクセスしようとした場合、あなたはエラーを取得します。デモンストレーションリポジトリのクローンを作成し、MyComponentメンバーの可視性をプライベートに変更すると、実行時にコンパイルエラーが発生しますngc。また、Ahead-of-Timeコンパイルに固有の回答もあります。

編集：この回答は正しくありません。私が投稿したときのトピックに関する公式のガイダンスはありませんでしたが、@ Yaroslovの（優れた、正しい）回答で説明されているように、これは当てはまりません：Codelizerが警告し、コンポーネントテンプレートのプライベート変数への参照でAoTコンパイルが失敗します。とは言っても、概念的なレベルでは、ここにあるすべてのものは有効なままなので、この回答は役に立ったと思われるのでそのままにしておきます。

はい、そうです。

privateと他のアクセス修飾子はTypescript構成体ですが、Component / controller / templateはTypescriptが何も知らない角度構成体であることを覚えておいてください。アクセス修飾子は間の可視性を制御しますクラスます。フィールドprivateを作成すると、他のクラスがそのフィールドにアクセスできなくなりますが、テンプレートとコントローラーはクラス内に存在するものです。

それは技術的には真実ではありませんが、（クラスがデコレータとそのメタデータにどのように関連するかを理解する代わりに）このように考えると役立つかもしれません。重要なこと（IMHO）はテンプレートとコントローラを別々のものとして考えることからシフトすることですエンティティをそれらをコンポーネント構成の統合された部分として考えるようにします。これは、ng2メンタルモデルの主要な側面の1つです。

そのように考えるprivateと、コンポーネントクラスの変数がそのテンプレートに表示されることを期待しています。同じ理由で、privateそのクラスのメソッドに変数が表示されることを期待しています。

コード例では質問がTypeScriptに関するものであることを示していますが、 活字鬼ごっこ。Angular2はDartでも利用でき、これはDartとの大きな違いです。

ダートテンプレートはプライベート変数を参照できませんダートが活字体とは対照的に、効果的に外部からのプライベートメンバーのアクセスを防止するため、コンポーネントクラスのを。

ただし、@ drewmooresの提案に戻って、コンポーネントとテンプレートを1つの単位として考えることを考えます。

更新（TS） プライベートプロパティへのオフラインコンパイルアクセスでは、Angular2 TSでもより制限されるようですhttps://github.com/angular/angular/issues/11422

コンポーネントのテンプレート内でプライベート変数を使用できます。ガイドについては、angular2チートシートを参照してください：https ://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter

typescriptのクラスのパブリック/プライベートメンバーに関する詳細な説明は、https：//www.typescriptlang.org/docs/handbook/classes.htmlにあります。

デフォルトでは、すべてのメンバーがパブリックです。パブリックメンバーには、クラスインスタンスと共にコンポーネントクラスの外部からアクセスできます。ただし、プライベートメンバーには、クラスメンバー関数内でのみアクセスできます。

回避策は、tsファイルでプライベート変数を使用し、ゲッターを使用することです。

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

tsファイルとhtmlは独立したままなので、これは良い方法です。tsファイルで_userName変数名を変更した場合でも、テンプレートファイルを変更する必要はありません。

簡単に言えば、TSファイルから技術的に分離されているため、テンプレートからプライベートメンバーにアクセスすることはできません。

tsconfig.app.jsonでは、コンパイラオプションで「fullTemplateTypeCheck」オプションを指定すると、プロジェクトのビルド時にプロジェクトのhtmlファイル内の無効な参照がすべて表示されます。

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

}