Angular2 - as variáveis ​​privadas devem estar acessíveis no modelo?

Se uma variável for declarada privateem uma classe de componente, devo acessá-la no modelo desse componente?

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

Não, você não deve usar variáveis ​​privadas em seus modelos.

Embora eu goste da resposta do drewmoore e veja a lógica conceitual perfeita nela, na implementação, ela está errada. Os modelos não existem nas classes de componentes, mas fora delas. Dê uma olhada neste repositório para a prova.

A única razão pela qual ele funciona é porque a privatepalavra-chave do TypeScript realmente não torna o membro privado. A compilação Just-in-Time acontece em um navegador em tempo de execução e o JS ainda não tem nenhum conceito de membros privados (ainda?). O crédito é para Sander Elias por me colocar no caminho certo.

Com uma ngccompilação antecipada, você obterá erros se tentar acessar membros privados do componente a partir do modelo. Clone o repositório de demonstração, altere MyComponenta visibilidade dos membros para privado e você receberá erros de compilação ao executar ngc. Aqui também está a resposta específica para a compilação Antecipada.

Editar: Esta resposta está incorreta. Não havia orientação oficial sobre o tópico quando eu o publiquei, mas, como explicado na resposta de @ Yaroslov (excelente e correta), esse não é mais o caso: o Codelizer agora alerta e a compilação do AoT falhará nas referências a variáveis ​​privadas nos modelos de componentes . Dito isto, em um nível conceitual, tudo aqui permanece válido, então deixarei esta resposta como parece ter sido útil.

Sim, isso é esperado.

Lembre-se de que privatee outros modificadores de acesso são construções Typescript, enquanto Component / controller / template são construções angulares que a Typescript não conhece. Modificadores de acesso controlam a visibilidade entre classes: criar um campo privateimpede que outras classes tenham acesso a ele, mas modelos e controladores são coisas que existem dentro das classes.

Isso não é tecnicamente verdade, mas (em vez de entender como as classes se relacionam com os decoradores e seus metadados), pode ser útil pensar dessa maneira, porque o importante (IMHO) é deixar de pensar no modelo e no controlador como separados entidades pensem nelas como partes unificadas do construto Component - este é um dos principais aspectos do modelo mental ng2.

Pensando dessa maneira, obviamente esperamos que privatevariáveis ​​em uma classe de componente sejam visíveis em seu modelo, pelo mesmo motivo que esperamos que sejam visíveis nos privatemétodos dessa classe.

Mesmo que o exemplo de código indique que a pergunta é sobre TypeScript, ele não tem o datilografadotag. O Angular2 também está disponível para o Dart e essa é uma diferença notável para o Dart.

No Dart, o modelo não pode fazer referência a variáveis ​​privadas da classe de componentes, porque o Dart, em contraste com o TypeScript, impede efetivamente o acesso de membros privados de fora.

Ainda apoio a sugestão do @drewmoores de pensar no componente e no modelo como uma unidade.

Atualização (TS) Parece que, com a compilação offline, o acesso a propriedades privadas também se tornará mais limitado no Angular2 TS https://github.com/angular/angular/issues/11422

Variáveis ​​privadas podem ser usadas no modelo de componente. Consulte a folha de dicas angular2 para obter orientação: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter

Uma explicação mais detalhada sobre membros públicos / privados de classes em texto datilografado pode ser encontrada aqui: https://www.typescriptlang.org/docs/handbook/classes.html .

Todos os membros por padrão são públicos. Os membros públicos podem ser acessados ​​de fora da classe do componente junto com a instância da classe. Porém, membros privados podem ser acessados ​​somente dentro das funções de membro da classe.

Uma solução alternativa pode estar usando variáveis ​​privadas no arquivo ts e usando getters.

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

Essa é uma boa abordagem, porque o arquivo ts e o html permanecem independentes. Mesmo se você alterar o nome da variável _userName no arquivo ts, não será necessário fazer nenhuma alteração no arquivo de modelo.

A resposta curta é não, você não deve conseguir acessar membros privados do modelo porque ele é tecnicamente separado do arquivo TS.

No tsconfig.app.json, se você fornecer a opção 'fullTemplateTypeCheck' nas opções do compilador, poderá ver todas as referências inválidas nos arquivos html do seu projeto no momento da construção do projeto.

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

}