Açısal2 - Şablonda özel değişkenlere erişilebilir olmalı mı?

Bir değişken privatebir bileşen sınıfında bildirilirse , o bileşenin şablonundan ona erişebilmeli miyim?

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

Hayır, şablonlarınızda özel değişkenler kullanmamalısınız.

Ben drewmoore'un cevabını beğenip mükemmel kavramsal mantığı görsem de, uygulama yanlıştır. Şablonlar bileşen sınıflarında değil, bunların dışında bulunur. Kanıt için bu repoya bir göz atın .

Çalışmasının tek nedeni, TypeScript'in privateanahtar kelimesinin gerçekten üyeyi özel yapmamasıdır. Tam zamanında derleme, çalışma zamanında bir tarayıcıda gerçekleşir ve JS'nin henüz özel üye kavramı yoktur (henüz?). Kredi beni doğru yola soktuğu için Sander Elias'a gidiyor .

Önceden ngcve Derleme derlemesinde, bileşenin özel üyelerine şablondan erişmeyi denerseniz hata alırsınız. Gösteri deposunu klonlayın, MyComponentüyelerin görünürlüğünü özel olarak değiştirin ve çalışırken derleme hataları alırsınız ngc. Burada ayrıca Zamanın Önde Derlemesi için özel bir cevap bulunmaktadır .

Düzenleme: Bu yanıt şimdi yanlış. Bu konuyu yayınladığımda resmi bir rehberlik yoktu, ancak @ Yaroslov'un (mükemmel ve doğru) cevabında açıklandığı gibi, bu artık geçerli değil: Codelizer artık uyarıyor ve bileşen şablonlarındaki özel değişkenlere yapılan referanslarda AoT derlemesi başarısız olacak . Bununla birlikte, kavramsal düzeyde buradaki her şey geçerli kalır, bu yüzden bu cevabı yardımcı gibi göründüğüm için bırakacağım.

Evet, bu bekleniyor.

privateBileşen / denetleyici / şablonun, Typcript'in hakkında hiçbir şey bilmediği açısal yapılar olduğunu ve diğer erişim değiştiricilerinin dizgi yapısı olduğunu unutmayın . Erişim değiştiriciler sınıflar arasındaki görünürlüğü kontrol eder : Alan oluşturmak, diğer sınıfların ona erişimini privateengeller , ancak şablonlar ve denetleyiciler sınıflar içinde bulunan şeylerdir .

Bu teknik olarak doğru değil, ancak (sınıfların dekoratörler ve meta verileriyle nasıl ilişkili olduğunu anlamak yerine), bunu bu şekilde düşünmek yararlı olabilir, çünkü önemli olan şey (IMHO) şablon ve denetleyici hakkında ayrı olarak düşünmektir. Onları Bileşen yapısının birleşik parçaları olarak düşünmek - bu ng2 zihinsel modelinin ana yönlerinden biridir.

Bu şekilde düşünerek private, bir bileşen sınıfındaki değişkenlerin şablonunda görünür olmasını bekleriz, aynı nedenle privatebu sınıftaki yöntemlerde de görünür olmalarını bekleriz .

Kod örneği sorunun TypeScript ile ilgili olduğunu belirtmesine rağmen, daktilo ile yazılmış yazıetiket. Dart için Angular2 de mevcuttur ve bu Dart için dikkate değer bir farktır.

In Dart şablon özel değişkenleri başvuramaz Dart typescript aksine etkili bir biçimde dışarıdan özel üyelerin erişimi engelleyen, çünkü bileşen sınıfının.

Hala bileşen hakkında düşünmek için @ drewmoores öneri ve yine de bir birim olarak şablon geri.

Güncelleme (TS) Angular2 TS'de özel mülklere çevrimdışı derleme erişimi daha sınırlı olacak gibi görünüyor https://github.com/angular/angular/issues/11422

Özel değişkenler bileşen şablonu içinde kullanılabilir. Kılavuz için açısal2 hile sayfasına bakın: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter

Dizgi yazılarındaki sınıfların kamu / özel üyeleri hakkında daha ayrıntılı bir açıklama burada bulunabilir: https://www.typescriptlang.org/docs/handbook/classes.html .

Tüm üyeler varsayılan olarak Herkese Açıktır. Herkese açık üyelere, sınıf örneği ile birlikte bileşen sınıfının dışından erişilebilir. Ancak özel üyelere sadece sınıf üyesi işlevleri içinde erişilebilir.

Geçici çözüm ts dosyasında özel değişkenler kullanmak ve getters kullanmak olabilir.

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

Bu iyi bir yaklaşımdır çünkü ts dosyası ve html bağımsız kalır. Ts dosyasında _userName değişken adını değiştirseniz bile, şablon dosyasında herhangi bir değişiklik yapmanız gerekmez.

Kısa yanıt hayır, teknik olarak TS dosyasından ayrıldığı için şablondan özel üyelere erişememeniz gerekir.

Tsconfig.app.json dosyasında derleyici seçeneklerinde 'fullTemplateTypeCheck' seçeneğini belirtirseniz, proje oluşturma sırasında projenizin html dosyalarındaki tüm geçersiz referansları görebilirsiniz.

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

}