¿Cómo pasar una string a un componente usando Angular2?

En angular2, un componente se considera como una ‘vista’ con su propia lógica y datos. El enlace de datos es el proceso de combinar valores de datos con sus representaciones correspondientes. Para los componentes, los valores de string se pueden pasar, ya sea directamente como literales de string o almacenando el literal de string en una variable. Hay 3 formas de pasar valores de string a componentes en angular2. Los enlaces de valor de string se describen en la sección de plantilla del componente.

Pasar un valor de string a un componente de su clase: aquí, la variable del mensaje obtendrá su valor del constructor de la clase o mediante el uso de enlaces de eventos angulares (entradas de usuario).

Sintaxis:

<component>{{message}}</component>

Ejemplo: Es la forma más sencilla de pasar una string a un componente. El componente ‘AppComponent’ tiene un selector llamado ‘app-display’ y la plantilla para mostrar se dirige a ‘app.component.html’. Cuando la clase del componente contiene los datos de string, el componente puede acceder a ellos mediante la interpolación de la variable ‘contenido’.

aplicación.componente.ts

import { Component } from '@angular/core';
@Component({ 
    selector: 'app-display',
    template: `app.component.html`
})
export class AppComponent {
    content : string = "Hello World";
}

aplicación.componente.html

GeeksForGeeks

<app-display> {{content}} </app-display>
Producción:
```
GeeksForGeeks
Hello World
```

2.Pasar el valor de la string entre componentes anidados: aquí, el campo de entrada es el atributo y el mensaje es la variable que contiene la string requerida. La interacción entre los componentes se puede realizar utilizando dos decoradores.

@Aporte()
@Producción()

Sintaxis:

<component [inputField]="message"></component>

1. Decorador @Input: se puede pasar una string de un componente principal a un componente secundario utilizando el decorador @Input en la clase y una propiedad de directiva del decorador del componente. Cuando una variable en un componente secundario se declara con el decorador @Input, esa variable puede ser ‘recibida’ por el componente secundario desde la plantilla del componente principal.

Ejemplo: el componente contenedor (principal) debe pasar el valor de ‘enviar’ al componente anidado (secundario). Al usar el enlace de propiedades, el ‘mensaje’ de destino de enlace obtiene el contenido del ‘envío’ de la fuente de enlace. La propiedad directiva del decorador de componentes para el componente principal especifica que se debe usar el ‘componente secundario’ . En el extremo del receptor, el hijo tiene el decorador @Input que recibe la string del padre y la usa en consecuencia.

padre.componente.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'parent',
  template: 'parent.component.html',
  directives: [ChildComponent];
  
})
export class parentComponent {
  send: string;
  
  constructor() {
    this.send = 'A message from parent';
  }
}

padre.componente.html

GeeksForGeeks

I am parent

<child [message]="send"></child>

child.component.ts

import { Component, Input } from '@angular/core';
  
@Component({
  selector: 'child',
  template: 'child.component.html',
})
export class childComponent {
  @Input() message: string;
}

niño.componente.html

I am child

<child>{{message}}</child>

Producción:

GeeksForGeeks
I am parent
I am child
A message from parent

2. Decorador @Output: este enfoque se utiliza para emitir datos del elemento secundario, que recibe el elemento principal. Para que un decorador @Output decore cualquier propiedad de la clase anidada, el tipo de propiedad debe ser un evento. La única forma en que un componente anidado puede devolver datos a su contenedor es con un evento. Los datos a pasar se denominan carga útil del evento. En angular2, un evento se define con un objeto EventEmitter.

Ejemplo: el componente secundario tendrá una instancia de un objeto EventEmitter utilizando la propiedad @Output. Se invoca una función (aquí, un clic de botón) para activar el paso de la string. Por otro lado, el componente principal que tiene el componente secundario vinculado mediante el decorador de directivas recibirá la carga útil mediante otra función que se puede utilizar según su interés.

padre.componente.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'parent',
  template: `parent.component.html`,
  directives: [ChildComponent]
})
  
export class ParentComponent {
    
  parentText = 'I am Parent';
  
  constructor() { }
    
  recievemsg($text) {
    this.parentText = $text;
  }
}

padre.componente.html

 {{ username }} 

<child (messageEmitter)="recievemsg()"></child>

child.component.ts

import { Component, Output, EventEmitter } from '@angular/core';
  
@Component({
  selector: 'child-',
  template: `child.component.html`,
})
  
export class ChildComponent {
  message: string = "Message From Child";
  
  // New EventEmitter object for emitting string
  @Output() messageEmitter = new EventEmitter<string>();
    
  sendmsg() {
      
    // Emit message on click
    this.messageEmitter.emit(this.message); 
  }
}

niño.componente.html

GeeksForGeeks 

Child called

<button (click)="sendmsg()"> Send Message </button>

Producción:

GeeksForGeeks
Child called
I am Parent
Message from child

Nota: Los dos métodos anteriores se utilizan para pasar strings a componentes por interpolación.

Pasar el valor de la string directamente al componente sin interpolación: aquí, el ‘mensaje’ en sí mismo es la string y se proporciona como entrada al atributo inputField del componente.

Sintaxis:

<component inputField="message"></component>
(or)
<component [inputField]="'message'"></component>
(or) 
<component inputField="{{'message'}}"></component>

Ejemplo: El siguiente ejemplo cubre los tres métodos.

aplicación.componente.ts

import { Component } from '@angular/core';

@Component({

selector: 'example',

templateUrl: './app.component.html',

})

export class AppComponent {

}
aplicación.componente.html

<example name="GeeksForGeeks1"></example>

<example [name]="'GeeksForGeeks2'"></example>

<example name=" {{'GeeksForGeeks3'}} "></example>

Producción:

GeeksForGeeks1
GeeksForGeeks2
GeeksForGeeks3

Publicación traducida automáticamente

Artículo escrito por anishablessy99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta