Header Ads Widget

Ticker

6/recent/ticker-posts

Parámetros de constructor de Angular 10 con inyectar y decoradores opcionales

 En este ejemplo, aprenderemos cómo usar los constructores de componentes y servicios con Angular 10 y versiones anteriores.

Veremos cómo proporcionar dependencias como parámetros de constructor a componentes o servicios y usar los decoradores @Optional@Injectpara agregar dependencias opcionales o crear tokens de inyección para pasar parámetros a servicios.

Como requisito previo, debe tener Angular CLI v10 instalado en su máquina de desarrollo.

También puede usar el IDE de Stackblitz en línea si aún no tiene un entorno de desarrollo listo.

Crear un nuevo proyecto de Angular 10

Comencemos con un nuevo proyecto. Vaya a una nueva interfaz de línea de comandos y ejecute el siguiente comando para crear un nuevo proyecto:

$ ng new Angular10Constructor 

La CLI le hará un par de preguntas: ¿ Si desea agregar enrutamiento angular? Escriba y para Sí y ¿Qué formato de hoja de estilo le gustaría usar? Elija CSS .

A continuación, vaya a la carpeta de su proyecto y ejecute el servidor usando los siguientes comandos:

$ cd Angular10Constructor
$ ng serve    

Utilice su navegador web y visite la http://localhost:4200/dirección para ver su aplicación en ejecución.

Abra su navegador web y navegue hasta la http://localhost:4200/dirección para ver su aplicación en ejecución.

¿Qué es un constructor?

El constructor es un método de una clase de TypeScript que se llama cuando se crea una instancia de la clase. No es una característica de Angular, sino un concepto que está presente en la mayoría de los lenguajes orientados a objetos, incluido TypeScript.

Esto es un ejemplo:

class Cls {
  constructor() {
    console.log('Hello world!');
  }
}

const cls = new Cls();

Cuando instanciamos la clase usando la nueva palabra clave, se llamará al constructor.

Constructores en Angular 10

En Angular 10 y versiones anteriores, el constructor tiene un uso especial además de su uso típico. Dado que Angular usa la inyección de dependencias para conectar varios artefactos como componentes y servicios, el inyector hace uso del constructor para inyectar las dependencias en la clase que puede ser un componente, un servicio, etc. Angular resuelve los proveedores que declaras en tu constructor. Esto es un ejemplo:

import { Component } from '@angular/core';
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {

  constructor(private httpClient: HttpClient) {}
}

Esto proporcionará HttpClienta la clase del componente, haciéndolo disponible para el componente a través de this.httpClient.

Para AppComponentenviar solicitudes HTTP, necesita solicitar HttpClientque se le inyecte, en lugar de crear su propia HttpClientinstancia con new.

Puede decirle a Angular que inyecte una dependencia en el constructor de un componente especificando un parámetro de constructor con el tipo de dependencia. Aquí está el constructor de AppComponent, pidiendo que se inyecte HttpClient:

constructor(private httpClient: HttpClient) {}

Pasar dependencias opcionales

Cuando un componente o servicio necesita una dependencia, el constructor de la clase toma esa dependencia como parámetro. Puede decirle a Angular que la dependencia es opcional anotando el parámetro del constructor con @Optional().

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

constructor(@Optional() private httpClient?: HttpClient) {

Pasar parámetros a servicios con el @Injectdecorador

Si necesita pasar parámetros adicionales a un servicio Angular, puede usar el @Injectdecorador que le permite pasar sus parámetros al servicio a través de la inyección de dependencia de Angular.

Supongamos que tenemos un servicio Angular 10 que requiere el ID del contenedor DOM en la plantilla del componente. Por ejemplo:

import {Inject, Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
    constructor (private elementId: string) { }
}

Este es un componente de ejemplo que puede hacer uso de este servicio:

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

@Component({
  selector: 'app-my',
  template: `
    <div id="container"></div>
  `,
})
export class MyComponent {

  constructor() { }

}

Ahora necesitamos inyectar el servicio anterior a través del constructor del componente, pero también debemos pasar el ID como parámetro al servicio.

Transformamos el elementIdparámetro en un token de inyección de la siguiente manera:

import {Inject, Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor (
    @Inject('elementId') private elementId: string
  ) { }
}

A continuación, debemos proporcionar este token al servicio a través de la providersmatriz del componente :

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

@Component({
  selector: 'app-my',
  template: `
    <div id="container"></div>
  `,
   providers: [

    {provide: 'elementId', useValue: 'container'},
  ]
})
export class MyComponent {

  constructor(private myService: MyService) { }
}

Aquí proporcionamos el token a nivel de componente, pero también podemos proporcionar tokens a nivel de módulo si tiene sentido.

Conclusión

Aprendimos sobre el uso de constructores de clases en Angular para la inyección de dependencias o declarando proveedores como parámetros.

Hemos visto cómo proporcionar dependencias como parámetros de constructor a componentes o servicios y usar los decoradores @Optional@Injectpara agregar dependencias opcionales o crear tokens de inyección para pasar parámetros a los servicios.

Publicar un comentario

0 Comentarios