Acceda al ámbito principal desde el controlador secundario en Angular

Presentaremos cómo acceder al ámbito principal desde el controlador secundario en Angular.

Acceda al ámbito principal desde el controlador secundario en Angular

Cuando trabajamos en una biblioteca o marco basado en componentes, hay muchos escenarios en los que tenemos que compartir datos entre dos componentes.

Primero, crearemos un componente users.

# angular CLI
ng g c users

El comando anterior generará un nuevo componente users.

Podemos ver que habrá una nueva carpeta de usuarios dentro de la carpeta de la aplicación. Para mostrar nuestro componente users, necesitamos usar el selector de usuarios establecido en user.component.ts.

Entonces, mostremos el componente users dentro del componente app. Primero, necesitamos agregar el UsersComponent en declarations de app.module.ts.

Entonces, el app.module.ts se verá como a continuación.

# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { UsersComponent } from './users/users.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, UsersComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Necesitamos crear una etiqueta con el selector de usuarios en app.component.html, y mostrará todo lo que hayamos agregado en users.component.html. Nuestro código en app.component.html se verá a continuación.

# angular
<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<app-users></app-users>

Producción:

Como se ve en la imagen, la etiqueta app-users ha mostrado users works! porque, en users.component.html, tenemos el siguiente código.

# angular
<p>users works!</p>

Convirtámoslo en un encabezado y enviemos datos desde el componente principal.

Primero cambiaremos nuestra etiqueta <p> a <h3>.

# angular
<h3>Child Component</h3>

Producción:

Enviaremos datos simples del componente principal al componente secundario. Definiremos una variable dentro del archivo app.component.ts, por lo que nuestro código estará debajo.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  data = "User Name"
}

Como se ve en el código, asignamos User Name a data; enviemos estos data al componente hijo. Entonces, el app.component.html se verá como a continuación.

# angular
<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<app-users [data] = "data"></app-users>

Al vincular [data] con la variable data, enviamos los datos al componente secundario, pero aún no está completamente vinculado.

Debemos importar el input en el archivo users.component.ts. El Input es un decorador que leerá los datos que hemos enviado a nuestro componente hijo y los mostrará en el componente hijo.

Dentro de nuestra clase UsersComponent, leeremos la propiedad que vinculamos en app.component.html dentro de la etiqueta app-users. Entonces, nuestro código en users.component.ts se verá como a continuación.

# angular
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  @Input() data
  constructor() { }

  ngOnInit() {
  }
}

Como se ve en el código, usamos @Input() data para vincular los [data] de la etiqueta app-users en app.component.html. Mostraremos los datos que hemos recibido dentro del archivo users.component.html.

# angular
<h3>Child Component</h3>
<h4>Data Recieved:</h4>
<p>{{data}}</p>

Producción:

Hemos recibido datos del componente principal al componente secundario. Ahora discutiremos cómo compartir un objeto de padre a hijo.

Intentemos compartir un objeto cambiando los datos que enviamos.

# angular
data = {
    name: 'Rana Hasnain',
    age: 25
  }

Producción:

Podemos ver que mostramos el [objeto Objeto] en lugar de los datos de ese objeto. Lo que debemos hacer ahora es modificar nuestro código en el archivo users.component.html y cambiar {{data}} por {{data.name}} o {{data.age}}, y mostrará el objeto.

# angular
<h3>Child Component</h3>
<h4>Data Received:</h4>
<p>Name: {{ data.name }}</p>
<p>Age: {{ data.age }}</p>

Producción:

Así que ahora podemos ver que hemos compartido datos y objetos de componentes principales a secundarios.