Estoy un poco confundido, para algunos tutoriales use #
para obtener la entrada, mientras que algunos usan [(ngModel)]
. ¿Cuál es la diferencia efectiva entre los dos?
#xxx
#xxx
le permite obtener una referencia de elemento.
<input #inp (change)="foo = inp.value">
escucha el evento de cambio y llama a onChange()
y pasa la propiedad de value
de entrada
Para encuadernación bidireccional también necesita
<input #inp (change)="foo = inp.value)" [value]="foo = $event">
NgModelo
<input [(ngModel)]="foo">
utiliza la directiva NgModel
que permite integrar elementos de entrada DOM y componentes personalizados en la funcionalidad de forma Angular. También se puede utilizar sin formulario. NgModel
es una abstracción sobre todo tipo de elementos y componentes, mientras que el ejemplo anterior ( #inp
) solo funciona para elementos de entrada que tienen una propiedad de value
y emiten un evento de change
.
[(ngModel)]="foo"
es la forma corta de
[ngModel]="foo" (ngModelChange)="foo = $event"
que muestra que es para encuadernación bidireccional.
insinuación
#xxx
devuelve una instancia de componente o directiva, si el elemento no es un elemento DOM simple sino un componente Angular o tiene aplicada una directiva Angular.
La sintaxis #name es una referencia de plantilla que se refiere al objeto html, se puede encontrar más información en los documentos de Angular: Guía de plantilla de Angular
El [(ngModel)] establece un enlace bidireccional en el valor de los elementos y lo asigna a una variable.
La variable de referencia de plantilla solo se usa para acceder a las propiedades dom del elemento. Entonces, para dos enlaces o cualquier cambio, debemos escribir
-> pero al usar el enlace ngmodel que ayuda en el enlace de datos bidireccional angular se puede hacer en breve por: ->