Qual é a diferença entre parênteses, colchetes e asteriscos no Angular2?

Eu tenho lido a referência rápida Angular 1 a 2 no site da Angular , e uma coisa que eu não entendi completamente foi a diferença entre esses caracteres especiais. Por exemplo, um que usa asteriscos:

<tr *ngFor="#movie of movies">
  <td>{{movie.title}}</td>
</tr>

Entendo aqui que o símbolo de hash (#) define moviecomo uma variável de modelo local, mas o que o asterisco antes ngForsignifica? E isso é necessário?

A seguir, estão os exemplos que usam colchetes:

<a [routerLink]="['Movies']">Movies</a>

Eu entendo um pouco que os colchetes ao redor routerLinkvinculam a esse atributo HTML / diretiva Angular. Isso significa que eles são um ponteiro para o Angular avaliar uma expressão? Como [id]="movieId"seria o equivalente id="movie-{{movieId}}"em Angular 1?

Por fim, são parênteses:

<button (click)="toggleImage($event)">

Eles são usados ​​apenas para eventos DOM e podemos usar outros eventos como (load)="someFn()"ou (mouseenter)="someFn()"?

Acho que a verdadeira questão é: esses símbolos têm um significado especial no Angular 2 e qual é a maneira mais fácil de saber quando usar cada um ? Obrigado!!

Todos os detalhes podem ser encontrados aqui: https://angular.io/docs/ts/latest/guide/template-syntax.html

• directiveName- é o formato abreviado para diretivas estruturais, onde o formato longo só pode ser aplicado a <template>tags. A forma abreviada envolve implicitamente o elemento em que é aplicado em a <template>.

• [prop]="value"é para ligação de objeto a propriedades ( @Input()de um componente ou diretiva Angular ou uma propriedade de um elemento DOM).
  Existem formas especiais:

  • [class.className] liga a uma classe css para ativar / desativar
  • [style.stylePropertyName] liga a uma propriedade de estilo
  • [style.stylePropertyName.px] liga a uma propriedade de estilo com uma unidade predefinida
  • [attr.attrName] liga um valor a um atributo (visível no DOM, enquanto as propriedades não estão visíveis)
  • [role.roleName] liga ao atributo de função ARIA (ainda não disponível)

• prop="{{value}}"liga um valor a uma propriedade O valor é especificado (também conhecido como interpolação)

• (event)="expr"liga um manipulador de eventos a um @Output()evento ou DOM

• #varou #varpossui funções diferentes, dependendo do contexto

  • Em um *ngFor="#x in y;#i=index"escopo, são criadas variáveis ​​para a iteração
    (na versão beta.17, isso é alterado para * ngFor = "deixe x em y; deixe i = índice" `)
  • Em um elemento DOM, <div #mydiv>uma referência ao elemento
  • Em um componente Angular, uma referência ao componente
  • Em um elemento que é um componente Angular ou que possui uma diretiva Angular onde exportAs:"ngForm"é definido, #myVar="ngForm"cria uma referência a esse componente ou diretiva.

[]- Vinculação de propriedades. Só de ida da fonte de dados para visualizar o destino. por exemplo

{{expression}}
[target]="expression"
bind-target="expression"

Podemos usar bind- em vez de []

()-> Ligação de evento Só de ida do destino da visualização para a fonte de dados

(target)="statement"
on-target="statement"

Podemos usar on- em vez de ()

[()]- Banana de ligação em dois sentidos em uma caixa

[(target)]="expression"
bindon-target="expression"

Podemos usar bindon - em vez de [()]

Como já mencionado, a documentação do Angular, especialmente o "tutorial do herói", explica isso mais profundamente. Aqui está o link, se você quiser conferir .

Parênteses são eventos do elemento em que você está trabalhando, como o clique em um botão, como no seu exemplo; isso também pode ser feito com mouse, keyup, onselect ou qualquer ação / evento para esse elemento, e o que se segue a =é o nome do método a ser chamado - usando os parênteses para a chamada. Esse método deve ser definido na sua classe de componente, ou seja:

<element (event)="method()"></element>

Parênteses funciona de outra maneira. Eles devem obter dados da sua classe - o oposto dos parênteses que estavam enviando o evento -, portanto, um exemplo comum é o uso de um estilo como este:

<element [ngStyle]="{display:someClassVariable}">

Vejo? Você está dando ao elemento um estilo com base no seu modelo / classe.

Para isso, você poderia ter usado ...

<element style="display:{{ModelVariable}};">

A recomendação é que você use colchetes duplos para coisas que você imprimirá na tela, como:

<h1>{{Title}}</h1>

O que quer que você use, se você for consistente, ajudará na legibilidade do seu código.

Por fim, para sua *pergunta, é uma explicação mais longa, mas é MUITO importante: Abstrai a implementação de alguns métodos que, de outra forma, você teria que fazer para conseguir ngFortrabalhar.

Uma atualização importante é que ngForvocê não usará mais o hash; você precisa usar o letseguinte:

<tr *ngFor="let movie of movies">
    <td>{{movie.title}}</td>
</tr>

Uma última coisa que vale a pena mencionar é que todas as opções acima também se aplicam aos seus componentes, por exemplo, se você criar um método em seu componente, ele será chamado usando ():

<my-owncomponent 
    (onSearched)="MethodToCall()" 
    [MyInputData]="SearchParamsArray"></my-owncomponent>