Angular2 - haruskah variabel pribadi dapat diakses di templat?

Jika suatu variabel dideklarasikan private pada kelas komponen, apakah saya dapat mengaksesnya di templat komponen itu?

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

Tidak, Anda tidak boleh menggunakan variabel pribadi di templat Anda.

Sementara saya suka jawaban drewmoore dan melihat logika konseptual yang sempurna di dalamnya, implementasi itu salah. Templat tidak ada di dalam kelas komponen, tetapi di luarnya. Lihatlah repo ini untuk buktinya.

Satu-satunya alasan mengapa ini berhasil adalah karena privatekata kunci TypeScript tidak benar-benar membuat anggota menjadi pribadi. Kompilasi Just-in-Time terjadi di browser saat runtime dan JS tidak memiliki konsep anggota pribadi (belum?). Penghargaan diberikan kepada Sander Elias karena menempatkan saya di jalur yang benar.

Dengan ngckompilasi Ahead-of-Time, Anda akan mendapatkan kesalahan jika Anda mencoba mengakses anggota pribadi komponen dari templat. Klo repo demonstrasi, ubah MyComponentvisibilitas anggota ke pribadi dan Anda akan mendapatkan kesalahan kompilasi, saat berjalan ngc. Berikut ini juga jawaban spesifik untuk kompilasi Ahead-of-Time.

Sunting: Jawaban ini sekarang salah. Tidak ada panduan resmi tentang topik ketika saya mempostingnya, tetapi seperti yang dijelaskan dalam jawaban @ Yaroslov (luar biasa, dan benar), ini tidak lagi menjadi masalah: Pembuat kode sekarang memperingatkan dan kompilasi AoT akan gagal pada referensi ke variabel pribadi dalam templat komponen . Yang mengatakan, pada level konseptual semuanya di sini tetap valid, jadi saya akan meninggalkan jawaban ini karena tampaknya telah membantu.

Ya, ini diharapkan.

Perlu diingat bahwa privatedan pengubah akses lainnya adalah konstruksi TypeScript, sedangkan Component / controller / template adalah konstruksi sudut yang tidak diketahui oleh apa pun tentang Typescript. Pengubah akses mengontrol visibilitas antar kelas: Membuat bidang privatetidak bisa dilakukan kelas lain dari memiliki akses ke sana, tetapi templat dan pengontrol adalah hal-hal yang ada di dalam kelas.

Secara teknis itu tidak benar, tetapi (sebagai pengganti memahami bagaimana kelas berhubungan dengan dekorator dan metadata mereka), mungkin akan membantu untuk memikirkannya dengan cara ini, karena yang penting (IMHO) adalah beralih dari berpikir tentang template dan pengontrol sebagai terpisah entitas ke dalam pemikiran mereka sebagai bagian terpadu dari konstruksi Komponen - ini adalah salah satu aspek utama dari model mental ng2.

Berpikir seperti itu, jelas kita mengharapkan privatevariabel pada kelas komponen agar terlihat dalam templatnya, untuk alasan yang sama kita mengharapkan mereka terlihat dalam privatemetode pada kelas itu.

Meskipun contoh kode menunjukkan pertanyaannya adalah tentang TypeScript tetapi tidak memiliki naskahmenandai. Angular2 juga tersedia untuk Dart dan ini merupakan perbedaan penting untuk Dart.

Di Dart , templat tidak dapat merujuk variabel privat dari kelas komponen, karena Dart berbeda dengan TypeScript secara efektif mencegah akses anggota pribadi dari luar.

Saya masih mendukung @drewmoores untuk memikirkan komponen dan template sebagai satu unit.

Pembaruan (TS) Tampaknya dengan kompilasi offline, akses ke properti pribadi akan menjadi lebih terbatas di Angular2 TS juga https://github.com/angular/angular/issues/11422

Variabel pribadi dapat digunakan dalam templat komponen. Lihat lembar contekan angular2 untuk panduan: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter

Penjelasan lebih rinci tentang anggota publik / swasta dari kelas dalam naskah dapat ditemukan di sini: https://www.typescriptlang.org/docs/handbook/classes.html .

Semua anggota secara default adalah Publik. Anggota publik dapat diakses dari luar kelas komponen bersama dengan instance-kelas. Tetapi anggota pribadi hanya dapat diakses dalam fungsi anggota kelas.

Solusi dapat menggunakan variabel pribadi dalam file ts dan menggunakan getter.

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

Ini adalah pendekatan yang baik karena file ts dan html tetap independen. Bahkan jika Anda mengubah nama variabel _userName dalam file ts, Anda tidak perlu melakukan perubahan apa pun pada file template.

Jawaban singkatnya adalah Anda tidak boleh dapat mengakses anggota pribadi dari templat karena secara teknis dipisahkan dari file TS.

Di tsconfig.app.json jika Anda memberikan opsi 'fullTemplateTypeCheck' dalam opsi kompiler, Anda dapat melihat semua referensi yang tidak valid dalam file html proyek Anda pada saat membangun proyek.

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

}