NativeScript - Enlace de datos

El enlace de datos es uno de los conceptos avanzados admitidos por NativeScript. NativeScript sigue el concepto de enlace de datos angular lo más cerca posible. El enlace de datos permite que el componente UI muestre / actualice el valor actual del modelo de datos de la aplicación sin ningún esfuerzo de programación.

NativeScript admite dos tipos de enlace de datos. Son los siguientes:

One-Way data binding - Actualiza la interfaz de usuario cada vez que se cambia el modelo.

Two-Way data binding- Sincroniza la interfaz de usuario y el modelo. Siempre que se actualiza el modelo, la interfaz de usuario se actualiza automáticamente y también cada vez que la interfaz de usuario obtiene datos del usuario (la interfaz de usuario se actualiza), el modelo se actualizará.

Aprendamos ambos conceptos en esta sección.

Enlace de datos unidireccional

NativeScript proporciona una opción simple para habilitar el enlace de datos unidireccional en un componente de la interfaz de usuario. Para habilitar el enlace de datos unidireccional, simplemente agregue corchetes en la propiedad de la IU de destino y luego asígnele la propiedad del modelo necesaria.

Por ejemplo, para actualizar el contenido de texto de un componente de etiqueta, simplemente cambie el código de la interfaz de usuario como se muestra a continuación:

<Label [text]='this.model.prop' />

Aquí,

this.model.prop se refiere a la propiedad del modelo, this.model.

Cambiemos nuestra BlankNgApp para comprender el enlace de datos unidireccional.

Paso 1

Agregue un nuevo modelo, Usuario (src / model / user.ts) de la siguiente manera:

export class User { 
   name: string 
}

Paso 2

Interfaz de usuario abierta de nuestro componente, src/app/home/home.component.html y actualice el código de la siguiente manera:

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar>
<GridLayout columns="*" rows="auto, auto, auto"> 
   <Button text="Click here to greet" class="-primary" color='gray' 
      (tap)='onButtonTap($event)' row='1' column='0'>
   </Button> 
   <Label [text]='this.user.name' row='2' column='0' 
      height="50px" textAlignment='center' style='font-size: 16px; 
      font-weight: bold; margin: 0px 32px 0 25px;'>
   </Label> 
</GridLayout>

Aquí,

El texto de la etiqueta se establece en el nombre de propiedad del modelo de usuario.
El evento de toque de botón se adjunta al método onButtonTap.

Paso 3

Código abierto del componente de inicio, src/app/home/home.component.ts y actualice el código de la siguiente manera:

import { Component, OnInit } from "@angular/core"; 
import { User } from "../../model/user" 
@Component({
   selector: "Home", 
   templateUrl: "./home.component.html" 
}) 
export class HomeComponent implements OnInit { 
   public user: User; 
   constructor() {
      // Use the component constructor to inject providers. 
      this.user = new User(); 
      this.user.name = "User1"; 
   }
   ngOnInit(): void { 
      // Init your component properties here. 
   } 
   onButtonTap(args: EventData) { 
      this.user.name = 'User2'; 
   } 
}

Aquí,

se importa el modelo de usuario
El objeto de usuario se crea en el constructor del componente
Se implementa el evento onButtonTap. La implementación de onButtonTap actualiza el objeto Usuario y establece el nombre de la propiedad como Usuario2

Etapa 4

Compile y ejecute la aplicación y haga clic en el botón para cambiar el modelo y cambiará automáticamente el Label texto.

El estado inicial y final de la aplicación es el siguiente:

Estado inicial

El estado inicial de enlace de datos unidireccional se muestra a continuación:

Estado final

El estado final de enlace de datos unidireccional se muestra a continuación:

Enlace de datos bidireccional

NativeScript también proporciona enlace de datos bidireccional para una funcionalidad avanzada. Vincula los datos del modelo a la interfaz de usuario y también vincula los datos actualizados en la interfaz de usuario al modelo.

Para hacer un enlace de datos bidireccional, use la propiedad ngModel y luego rodee con [] y () como se muestra a continuación:

<TextField [(ngModel)] = 'this.user.name'></TextField>

Cambiemos la aplicación BlankNgApp para comprender mejor el enlace de datos bidireccional.

Paso 1

Importar NativeScriptFormsModule al HomeModule (src/app/home/home.module.ts) como se especifica a continuación -

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; 
import { NativeScriptCommonModule } from "nativescript-angular/common"; 
import { HomeRoutingModule } from "./home-routing.module"; 
import { HomeComponent } from "./home.component"; 
import { NativeScriptFormsModule } from "nativescript-angular/forms";
@NgModule({ 
   imports: [ 
      NativeScriptCommonModule, 
      HomeRoutingModule, 
      NativeScriptFormsModule 
   ], 
   declarations: [ 
      HomeComponent 
   ], 
   schemas: [ 
      NO_ERRORS_SCHEMA 
   ]
}) 
export class HomeModule { }

Aquí,

NativeScriptFormsModule habilita el enlace de datos bidireccional. De lo contrario, el enlace de datos bidireccional no funcionará como se esperaba.

Paso 2

Cambie la interfaz de usuario del componente de inicio como se indica a continuación:

<ActionBar> <Label text="Home"></Label></ActionBar> 
<GridLayout columns="*" rows="auto, auto"> 
   <TextField hint="Username" row='0' column='0' color="gray" 
      backgroundColor="lightyellow" height="75px" [(ngModel)]='this.user.name'>
   </TextField> 
   <Label [text]='this.user.name' row='1' column='0' height="50px" 
      textAlignment='center' style='font-size: 16px; font-weight: bold; 
      margin: 0px 32px 0 25px;'>
   </Label> 
</GridLayout>

Aquí,

La propiedad de texto del componente de etiqueta se establece con enlace de datos unidireccional. Si el usuario del modelo se actualiza, su propiedad de texto se actualizará automáticamente.

El componente TextField establece el ngModel como this.user.name. Si el usuario del modelo se actualiza, su propiedad de texto se actualizará automáticamente. Al mismo tiempo, si el usuario cambia el valor de TextField, el modelo también se actualiza. Si el modelo se actualiza, también activará los cambios de propiedad de texto de Label. Por lo tanto, si el usuario cambia los datos, se mostrará en la propiedad de texto de Label.

Paso 3

Ejecute la aplicación e intente cambiar el valor del cuadro de texto.

El estado inicial y final de la aplicación será similar al que se especifica a continuación:

Estado inicial

Enlace de datos bidireccional: el estado inicial se indica a continuación:

Estado final

Enlace de datos bidireccional - El estado final se muestra a continuación -

↰ Previous page Next page ↱