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

Jeśli zmienna jest zadeklarowana private na 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
}
Author: drewmoore, 2016-01-03
Source

5 answers

Edit: ta odpowiedź jest teraz Niepoprawna. nie było oficjalnych wskazówek na ten temat, kiedy go opublikowałem, ale jak wyjaśniono w (doskonałej i poprawnej) odpowiedzi @Yaroslov, tak już nie jest: Codelizer ostrzega teraz, a kompilacja AoT zawiedzie w odniesieniu do prywatnych zmiennych w szablonach komponentów. To powiedziawszy, na poziomie koncepcyjnym wszystko tutaj pozostaje aktualne, więc zostawię tę odpowiedź, ponieważ wydaje się, że była pomocna.

Tak, to jest oczekiwane.

Należy pamiętać, że private i inne modyfikatory dostępu są konstrukcjami Typescript, podczas gdy komponent/kontroler/szablon są konstrukcjami kątowymi, o których Typescript nic nie wie. Modyfikatory dostępu kontrolują widoczność pomiędzy klasami: tworzenie pola private uniemożliwia innym klasom dostęp do niego, ale szablony i kontrolery to rzeczy, które istnieją wewnątrz klas.

To nie jest technicznie prawda, ale (zamiast zrozumienia, jak klasy odnoszą się do dekoratorów i ich metadanych), przydałoby się pomyśleć o tym w ten sposób, bo najważniejsze (IMHO) jest przejście od myślenia o szablonie i kontrolerze jako osobnych bytach do myślenia o nich jako o zunifikowanych częściach konstrukcji komponentowej - to jeden z głównych aspektów mentalnego modelu ng2.

Myśląc o tym w ten sposób, oczywiście oczekujemy, że private zmienne NA klasie komponentu będą widoczne w jej szablonie, z tego samego powodu oczekujemy, że będą być widoczne w metodach private w tej klasie.

 67
Author: drewmoore,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-16 00:39:42

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

Choć podoba mi się ODPOWIEDŹ drewmoore ' a i widzę w niej idealną logikę pojęciową, implementacja jest błędna. Szablony nie istnieją w klasach komponentów, ale poza nimi. Spójrz na Ten repo Dla dowodu.

Działa tylko dlatego, że słowo kluczowe TypeScript private tak naprawdę nie czyni członka prywatnym. Kompilacja Just-In-Time odbywa się w przeglądarce w czasie wykonywania i JS nie ma żadnej koncepcji członków prywatnych (jeszcze?). Zasługa Sandera Eliasa za to, że postawił mnie na dobrej drodze.

Z ngc i przed kompilacją, otrzymasz błędy, jeśli spróbujesz uzyskać dostęp do prywatnych członków komponentu z szablonu. Clone demonstration repo, Zmień widoczność członków MyComponent na prywatne, a podczas uruchamiania ngc pojawią się błędy kompilacji. Oto również odpowiedź specyficzna dla kompilacji z wyprzedzeniem.

 144
Author: Yaroslav Admin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:03:05

Chociaż przykład kodu wskazuje, że pytanie dotyczy języka TypeScript, nie posiada on znacznika typescript. Angular2 jest również dostępny dla Dart i jest to znacząca różnica w stosunku do Dart.

W Dartszablon nie może odwoływać się do prywatnych zmiennych klasy component, ponieważ Dart w przeciwieństwie do TypeScript skutecznie zapobiega dostępowi prywatnych członków z zewnątrz.

I still back @ drewmoores sugestia, aby pomyśleć o komponencie i to szablon jako jedna jednostka.

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

 13
Author: Günter Zöchbauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-08 06:15:36

Prywatne zmienne mogą być używane w szablonie komponentu. Zobacz ściągacz angular2 dla przewodnika: 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 .

Domyślnie wszyscy członkowie są publiczni. Dostęp do członków publicznych można uzyskać spoza komponentu Klasa wraz z klasą-instancją. Ale do członków prywatnych można uzyskać dostęp tylko w ramach funkcji członka klasy.

 2
Author: anusreemn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-23 07:54:33

Obejściem może być użycie prywatnych zmiennych w pliku ts i użycie getterów.

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

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

 1
Author: Franklin Pious,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-27 05:43:44