change - page title angular 4

Enlace de propiedad vs interpolación de atributo

Question

He leído un artículo sobre la diferencia entre propiedad y enlaces de atributo. Por lo que entiendo, la mayoría de las veces, Angular2 prefiere enlaces de propiedad, porque después de cada cambio en los datos, el DOM se actualizaría. (Si me equivoco, por favor corrígeme).

Tengo un componente personalizado y lo uso desde el componente principal. En él, tengo un @Input llamado truevalue . cuando inicio truevalue desde el elemento principal a través del enlace de propiedad, a veces, no cambia. Utilicé el siguiente código:

<my-checkbox [(ngModel)]="chkItems" [disabled]="!editMode" [trueValue]="Y"></my-checkbox>

Si envío true o "1" en trueValue , funciona, pero si envío "Y" o "YES" , no funciona. Así que estoy obligado a usar el enlace de atributos. No sé cuál es el problema.

Lo he cambiado, en lo siguiente:

<my-checkbox [(ngModel)]="chkItems" [disabled]="!editMode" trueValue="Y"></my-checkbox>

Gracias por adelantado

Answer 1

Suponiendo que my-checkbox es su selector de componente personalizado y está utilizando esto en su componente principal. Como tiene trueValue como propiedad @Input en su componente personalizado, para poder usarlo en el componente padre Y debe evaluar a algún value lo que hace en caso de 1 (equivalente a verdadero).

Para el enlace de propiedad al trabajo, debe evaluar a un valor. "SÍ" o "S" son solo valores de cadena que no se evaluarán a menos que haga algo como:

export class ParentComponent` {
       Y = "YES"; // <--or "Y"
    }

y luego muestra trueValue usando la interpolation en tu componente personalizado como {{trueValue}}

Otra cosa a tener en cuenta es que cuando usas {{}} es decir, la interpolación, siempre convierte el valor a .toString() antes de enlazar.

Answer 2

Técnicamente hay 3 formas de enlazar propiedades.

1. Interpolación de cadenas - {{expresión}} - representa el valor enlazado de la plantilla del componente y convierte esta expresión en una cadena.

2. Enlace de propiedad - [destino] = "expresión" - hace lo mismo al representar el valor del componente a la plantilla, pero si desea vincular la expresión que no sea una cadena (por ejemplo, booleano), la vinculación de la propiedad es la mejor opción .

3. bind-target = "expresión" - Esta no es una forma regular de uso.

Siempre es su decisión usar cualquier opción que se adapte a su caso de uso.

Answer 3

Al representar valores de datos como cadenas , no hay ninguna razón técnica para preferir una forma a la otra.

Si queremos valores de datos como booleanos u otros que no sean cadenas, entonces deberíamos buscar la unión de propiedades

Answer 4

Enlace a la propiedad como

[trueValue]="..."

evalúa la expresión "..." y asigna el valor

"true" evalúa al valor true "Y" es desconocido. No hay un valor interno de Y en TypeScript y ninguna propiedad en la instancia de la clase de componente, que es el alcance del enlace de la plantilla. En este caso, querrías

[trueValue]="''Y''"

Tenga en cuenta las cotizaciones adicionales para hacer Y una cadena.

Los atributos simples también se asignan a las entradas

trueValue="Y"

es HTML simple sin ninguna vinculación Angular2 y los valores de los atributos siempre son cadenas. Por lo tanto, esto asignaría la cadena Y

Otra forma es la interpolación de cuerdas

trueValue="{{true}}"

asignaría el valor "true" (como cadena) porque la expresión dentro {{...}} se evaluaría y luego se convertiría en una cadena antes de pasarla a la entrada. Esto no se puede usar para unir otros valores distintos de cadenas.

Para vincular explícitamente a un atributo en lugar de una propiedad que puede usar (además de trueValue="Y" que crea un atributo pero no realiza ninguna evaluación)

[attr.trueValue]="''Y''"

o

attr.trueValue="{{''Y''}}"

La vinculación de atributos es útil si desea usar el atributo trueValue para direccionar el elemento con selectores de CSS.