158

コンポーネント クラスで変数が宣言されている場合、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
}
4

8 に答える 8

243

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

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

それが機能する唯一の理由は、TypeScript のprivateキーワードが実際にはメンバーを非公開にしないためです。Just-in-Time コンパイルは実行時にブラウザーで行われ、JS にはプライベート メンバーの概念がありません (まだ?)。功績は、私を正しい軌道に乗せてくれたSander Eliasにあります。

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

于 2016-08-17T14:55:53.617 に答える
16

タグがありません。Angular2 は Dart でも使用できます。これは Dart との大きな違いです。

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

コンポーネントとそれはテンプレートを1つのユニットとして考えるという@drewmooresの提案を今でも支持しています。

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

于 2016-04-13T09:17:05.567 に答える
5

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

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

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

于 2018-03-23T19:14:19.950 に答える