Angular2 - чи повинні бути доступними приватні змінні у шаблоні?

Якщо змінна оголошена 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
}

Ні, ви не повинні використовувати приватні змінні у своїх шаблонах.

Хоча мені подобається відповідь древмура і я бачу в ній досконалу концептуальну логіку, впроваджуючи це, це неправильно. Шаблони існують не в класах компонентів, а поза ними. Погляньте на це репо для підтвердження.

Єдина причина, чому це працює - це те, що privateключове слово TypeScript насправді не робить члена приватним. Компіляція щойно в часі відбувається в браузері під час виконання, а JS не має жодної концепції приватних членів (ще?). Кредит належить Сандеру Еліасу за те, що він поставив мене на правильний шлях.

За допомогою ngcта заздалегідь компіляції ви отримаєте помилки, якщо спробуєте отримати доступ до приватних членів компонента з шаблону. Клоніруйте демонстраційне репо, змініть MyComponentвидимість членів на приватну, і ви отримаєте помилки компіляції під час запуску ngc. Ось також відповідь, специфічна для складання заздалегідь часу.

Редагувати: Ця відповідь зараз неправильна. Офіційних вказівок з цієї теми не було, коли я розміщував її, але як пояснено у відповіді @ Ярослова (відмінна і правильна), це вже не так: Codelizer тепер попереджає, а компіляція AoT не зможе посилатися на приватні змінні в шаблонах компонентів. . Однак на концептуальному рівні все тут залишається дійсним, тому я залишу цю відповідь, як здається, була корисною.

Так, це очікується.

Майте на увазі, що privateта інші модифікатори доступу - це конструкції Typescript, тоді як компонент / контролер / шаблон - це кутові конструкції, про які Typescript нічого не знає. Модифікатори доступу контролюють видимість між класами: Створення поля privateне дозволяє іншим класам мати доступ до нього, але шаблони та контролери - це речі, які існують у межах класів.

Це технічно не відповідає дійсності, але (замість того, щоб зрозуміти, як класи відносяться до декораторів та їх метаданих), можливо, було б корисно подумати про це так, адже важлива річ (IMHO) - перейти від роздумів про шаблон і контролер як про окремий суб'єкти, які думають про них як про уніфіковані частини конструкції Компонента - це один з головних аспектів ментальної моделі ng2.

Думаючи про це таким чином, очевидно, ми очікуємо, що privateзмінні класу компонентів будуть видимими в його шаблоні, з тієї ж причини ми очікуємо, що вони будуть видимими у privateметодах цього класу.

Незважаючи на те, що приклад коду вказує, що питання про TypeScript у нього немає машинопистег. Angular2 також доступний для Dart, і це помітна різниця для Dart.

В Dart шаблон не може посилатися на окремі змінному клас компонента, тому що Dart на відміну від машинопису ефективно перешкоджає доступу приватних членів від зовнішньої сторони.

Я все ще повертаюся до пропозиції @drewmoores, щоб подумати про компонент і його шаблон, як про одне ціле.

Оновлення (TS) Здається, що в режимі офлайн-компіляції доступ до приватних ресурсів стане більш обмеженим у Angular2 TS, а також https://github.com/angular/angular/isissue/11422

Приватні змінні можна використовувати в шаблоні компонента. Дивіться посібник angular2 для посібника: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter

Більш детальне пояснення щодо державних / приватних членів класів у машинописному тексті можна знайти тут: https://www.typescriptlang.org/docs/handbook/classes.html .

Усі учасники за замовчуванням є загальнодоступними. Доступ до публічних членів можна отримати за межами класу компонентів разом із екземпляром класу. Але до приватних членів можна отримати доступ лише в межах функцій члена класу.

Для вирішення може бути використання приватних змінних у файлі ts та використання getters.

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

Це хороший підхід, оскільки файл ts та html залишаються незалежними. Навіть якщо ви зміните ім'я змінної _userName у файлі ts, вам не потрібно робити жодних змін у файлі шаблону.

Коротка відповідь - ні, ви не повинні мати доступ до приватних членів із шаблону, оскільки він технічно відокремлений від файлу TS.

У tsconfig.app.json, якщо ви надаєте опцію 'fullTemplateTypeCheck' у параметрах компілятора, ви можете побачити всі недійсні посилання у файлах html вашого проекту під час створення проекту.

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

}