Angular2 - czy w szablonie powinny być dostępne zmienne prywatne?

Jeśli zmienna jest zadeklarowana privatew klasie komponentu, czy powinienem mieć do niej dostęp w szablonie tego komponentu?

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

Nie, nie powinieneś używać prywatnych zmiennych w swoich szablonach.

Chociaż podoba mi się odpowiedź drewmoore'a i widzę w niej doskonałą logikę koncepcyjną, pod względem implementacji jest źle. Szablony nie istnieją w klasach komponentów, ale poza nimi. Spójrz na to repozytorium, aby uzyskać dowód.

Jedynym powodem, dla którego to działa, jest to, że privatesłowo kluczowe TypeScript nie sprawia, że ​​element członkowski jest prywatny. Kompilacja Just-in-Time odbywa się w przeglądarce w czasie wykonywania, a JS nie ma żadnej koncepcji prywatnych członków (jeszcze?). Chwała Sanderowi Eliasowi za skierowanie mnie na właściwy tor.

Dzięki ngckompilacji i kompilacji z wyprzedzeniem wystąpią błędy, jeśli spróbujesz uzyskać dostęp do prywatnych członków komponentu z szablonu. Sklonuj repozytorium demonstracyjne, zmień MyComponentwidoczność członków na prywatną, a podczas uruchamiania wystąpią błędy kompilacji ngc. Tutaj jest również odpowiedź specyficzna dla kompilacji Ahead-of-Time.

Edycja: ta odpowiedź jest teraz nieprawidłowa. Nie było oficjalnych wskazówek na ten temat, kiedy to opublikowałem, ale jak wyjaśniono w odpowiedzi @ Yaroslova (doskonała i poprawna), to już nie ma miejsca: Codelizer ostrzega teraz i kompilacja AoT nie powiedzie się w przypadku odwołań do zmiennych prywatnych w szablonach komponentów . To powiedziawszy, na poziomie koncepcyjnym wszystko tutaj pozostaje aktualne, więc zostawię tę odpowiedź, ponieważ wydaje się być pomocna.

Tak, jest to oczekiwane.

Należy pamiętać, że privatei inne modyfikatory dostępu są konstrukcjami Typescript, podczas gdy komponent / kontroler / szablon to konstrukcje kątowe, o których Typescript nic nie wie. Modyfikatory dostępu kontrolują widoczność między klasami: utworzenie pola privateuniemożliwia innym klasom dostęp do niego, ale szablony i kontrolery to elementy, które istnieją w klasach.

To nie jest technicznie prawda, ale (zamiast rozumieć, w jaki sposób klasy odnoszą się do dekoratorów i ich metadanych), warto pomyśleć o tym w ten sposób, ponieważ ważne jest (IMHO) odejście od myślenia o szablonie i kontrolerze jako osobnych by traktować je jako zjednoczone części konstrukcji komponentu - jest to jeden z głównych aspektów modelu mentalnego ng2.

Myśląc o tym w ten sposób, oczywiście oczekujemy, że privatezmienne w klasie komponentów będą widoczne w jej szablonie, z tego samego powodu, dla którego oczekujemy, że będą widoczne w privatemetodach tej klasy.

Mimo że przykładowy kod wskazuje, że pytanie dotyczy języka TypeScript, nie ma rozszerzenia maszynopisetykietka. Angular2 jest również dostępny dla Dart i jest to znacząca różnica w stosunku do Dart.

W Dart szablon nie mogą odwoływać się do zmiennych prywatnych klasy komponentów, ponieważ w przeciwieństwie do darta maszynopis skutecznie uniemożliwia dostęp prywatnych członków z zewnątrz.

Wciąż jednak popieram sugestię @drewmoores, aby pomyśleć o komponencie i jego szablonie jako jednej jednostce.

Aktualizacja (TS) Wygląda na to, że dostęp do kompilacji offline do prywatnych właściwości stanie się bardziej ograniczony również w Angular2 TS https://github.com/angular/angular/issues/11422

Zmienne prywatne mogą być używane w szablonie komponentu. Zobacz poradnik dotyczący angular2: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter

Bardziej szczegółowe wyjaśnienie na temat publicznych / prywatnych członków klas w maszynopisie można znaleźć tutaj: https://www.typescriptlang.org/docs/handbook/classes.html .

Wszyscy członkowie są domyślnie publicznymi. Dostęp do członków publicznych można uzyskać spoza klasy komponentów wraz z instancją klasy. Dostęp do członków prywatnych można jednak uzyskać tylko w ramach funkcji składowych klasy.

Obejściem może być użycie zmiennych prywatnych w pliku ts i użycie metod pobierających.

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

To dobre podejście, ponieważ plik ts i html pozostają niezależne. Nawet jeśli zmienisz nazwę zmiennej _userName w pliku ts, nie musisz dokonywać żadnych zmian w pliku szablonu.

Krótka odpowiedź brzmi: nie, nie powinieneś mieć dostępu do prywatnych członków z szablonu, ponieważ jest on technicznie oddzielony od pliku TS.

W tsconfig.app.json, jeśli podasz opcję „fullTemplateTypeCheck” w opcjach kompilatora, zobaczysz wszystkie nieprawidłowe odwołania w plikach html projektu w czasie tworzenia projektu.

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

}