3.4 Constructor

El constructor es Algo muy importante sobre un componente, es quien lo va a crear, esto viene de la mano de la teoria de los objectos... pero vamos a repasar un poco y si no la conoces vamos a entenderla.

Un Objeto es una Clase instanciada ... Osea que un "class" cuando le hacemos un "new" genera un objeto de esa clase, entonces con los componentes es algo parecido... cuando arrancamos nuestro proyecto Angular instancia un Componente para renderizar la vista (eso se indica en el ngModule).

Entonces una clase cuando es instanciada, lo primero que se ejecuta es el constructor, quien "construye" lo que genera el formato incial del objeto.

Para esto lo vamos a ver en un ejemplo.

class MyPerson(){

    var nombre:string;
    var apellido:string;

    constructor(_nombre:string, _apellido:string){
        this.nombre = _nombre;
        this.apellido = _apellido;
    }   
}

var Jorge = new MyPerson("Jorge", "Cano");

var JorgeDos = new MyPerson(); => //da error, ya que el constructor pide DOS parametros

Entonces ahora que entendimos que un objeto se instancia a base del contructor, vamos a entender un poco mejor como se generan con los constructores de los componentes de angular.

Esto mismo pasa en los componentes de Angular, lo que quiere decir, es que Angular entiende que si importamos ciertos modulos, y los ponemos en nuestros constructores.

Vamos a ver un ejemplo en un componente de Angular con el modulo Router

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

@Component({
    selector: 'app-component',
    templateUrl: 'app.component.html'
})

export class AppComponent{

    constructor(private router:Router){
    }
}

Ahora cuando Angular cree "AppComponent" lo que va a pasar es que va a tener que enviarle si o si la funcionalidad Router (que importamos arriba) que a su vez tuvimos que tener importada en el NgModule.

Entonces cuando crea el componente lo que va a pasar es que le va a pasar ese parametro, ahora veamos que en el codigo a direfencia de las funciones normales le agregue un "private" adelante.

Lo que va a hacer un "private" o "public" en el constructor es declarar una variable privada o publica dentro del componete, en el caso de que no la hagamos tendriamos que asignarla a una variable que nosotros hayamos creado antes.

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

@Component({
    selector: 'app-component',
    templateUrl: 'app.component.html'
})

export class AppComponent{
    router:Router;

    constructor(_router:Router){
        this.router = _router;
    }
}

En ambos codigos logramos lo mismo, la costumbre y la documentación indica que lo deberiamos hacer como en el primer código indicado.

Con esto ya entendemos como Angular declara por dentro cada uno de los componentes, como utiliza sus constructores y como pasar parametros a la creación.