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 на самом деле не делает член закрытым. Компиляция Just-in-Time происходит в браузере во время выполнения, а в JS нет концепции частных членов (пока?). Благодарим Сандера Элиаса за то, что он направил меня на правильный путь.

С ngcкомпиляцией и с опережающей компиляцией вы получите ошибки, если попытаетесь получить доступ к закрытым членам компонента из шаблона. Клонируйте демонстрационное репо, измените MyComponentвидимость участников на частную, и при запуске вы получите ошибки компиляции ngc. Вот также ответ, специфичный для компиляции Ahead-of-Time.

Изменить: этот ответ теперь неверен. Когда я опубликовал его, не было официального руководства по теме, но, как объясняется в ответе @ Yaroslov (отличный и правильный), это уже не так: Codelizer теперь предупреждает, а компиляция AoT не будет работать при ссылках на частные переменные в шаблонах компонентов . Тем не менее, на концептуальном уровне все здесь остается в силе, поэтому я оставлю этот ответ, поскольку он, кажется, был полезным.

Да, это ожидаемо.

Имейте в виду, что privateи другие модификаторы доступа являются конструкциями Typescript, тогда как Component / controller / template - это конструкции angular, о которых Typescript ничего не знает. Модификаторы доступа управляют видимостью между классами: создание поля privateпредотвращает доступ к нему других классов , но шаблоны и контроллеры - это вещи, которые существуют внутри классов.

Технически это не так, но (вместо понимания того, как классы связаны с декораторами и их метаданными), может быть полезно думать об этом таким образом, потому что важно (ИМХО) отказаться от мышления о шаблоне и контроллере как о отдельных сущностей, чтобы думать о них как о единых частях конструкции Компонент - это один из основных аспектов ментальной модели ng2.

Рассуждая таким образом, мы, очевидно, ожидаем, что privateпеременные класса компонента будут видны в его шаблоне, по той же причине, по которой мы ожидаем, что они будут видны в privateметодах этого класса.

Несмотря на то, что пример кода указывает на то, что вопрос касается TypeScript, у него нет машинописьтег. Angular2 также доступен для Dart, и это заметное отличие от Dart.

В дротике шаблон не может ссылаться на отдельные переменном класс компонента, потому что Dart в отличии от машинописи эффективно препятствует доступу частных членов от внешней стороны.

Я все еще поддерживаю предложение @drewmoores подумать о компоненте и его шаблоне как о едином блоке.

Обновление (TS) Похоже, что с автономной компиляцией доступ к частным свойствам станет более ограниченным в Angular2 TS, а также https://github.com/angular/angular/issues/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 и использовании геттеров.

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

Это хороший подход, поскольку ts-файл и html остаются независимыми. Даже если вы измените имя переменной _userName в файле ts, вам не нужно вносить никаких изменений в файл шаблона.

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

В tsconfig.app.json, если вы укажете опцию fullTemplateTypeCheck в параметрах компилятора, вы сможете увидеть все недопустимые ссылки в html-файлах вашего проекта во время сборки проекта.

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

}