input component angular2 – javascript angularjs-2.0 ionic2

Pregunta:


saben si se puede obtener el dato desde el constructor que se obtiene desde el input componente que le defino un ‘id’?, osea lo que hago es hago una directiva <contenido-images [id]="contenido.id"></contenido-images> ese [id] envio un numero que lo recibe contenidoImages.ts y lo obtengo por medio de @Input() id en el templateUrl si me sale lo que le envío que lo imprimo así {{id}}.

Pero lo que quiero es obtener ese id desde contenidoImages.ts para consultar un servicio y traer mas datos y luego si imprimirlo en el templateUrl: 'contenidoImages.html', le hago un console.log(this.id) pero me sale undefined, nose porque no lo obitiene pero si lo imprime en el template.

Le muestro como esta mi codigo:

page2.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { MenuServices } from '../../app/services/menu';
import { contenidoServices } from '../../app/services/contenidos';

@Component({
 selector: 'page-page2',
 templateUrl: 'page2.html'
})

export class Page2{
   selectedItem: any;

   constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private menu: MenuServices,
    private contenido: contenidoServices
   ){
     this.selectedItem = {boolean: true, result: navParams.get('item')};
   }
}

page2.html

<div *ngFor="let contenido of selectedItem.result">
  {{contenido.id}}
  <contenido-images [id]="contenido.id">
  </contenido-images>
  <div class="contenido-menu">
    <h2>{{contenido.titulo}}</h2>
    <div class="texto">
      {{contenido.texto}}
    </div>
  </div>
</div>

contenidoImages.ts

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

import { contenidoServices } from '../../app/services/contenidos';

@Component({
  selector: 'contenido-images',
  templateUrl: 'contenidoImages.html'
})

export class contenidoImage{
   @Input() id;
   constructor(private contenido: contenidoServices){
      console.log(this.id);
   }

   console.log(this.id);
}

contenidoImages.html

<ion-slides pager>
  <ion-slide>
    {{id}}
  </ion-slide>
  <ion-slide>
    {{id}}
  </ion-slide>
</ion-slides>

Preguntado por: Albert Arias

Juan Hernández

Lo que sucede es que el constructor se inicia por default y no cambia, es decir, se inicializó el componente antes de cargar el componente que contiene ese id por lo que según tus necesidades debes utilizar ngOnChanges() o ngAfterViewInit().

lo que puedes hacer en esos casos es esto:

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

    import { contenidoServices } from '../../app/services/contenidos';

    @Component({
      selector: 'contenido-images',
      templateUrl: 'contenidoImages.html'
    })

    export class contenidoImage{
       @Input() set id(val){
         this.idRef = val;
         //cualquier otra cosa que quieras hacer con val que contiene lo que sea que tenga el input id.
       };
       let idRef:string; //suponiendo que es string
       constructor(private contenido: contenidoServices){
       }
  }

y en tu template

 <ion-slides pager>
  <ion-slide>
    {{idRef}}
  </ion-slide>
  <ion-slide>
    {{idRef}}
  </ion-slide>
</ion-slides>

hasta donde tengo entendido los inputs no necesariamente están disponibles al momento que se construye el componente, es por eso que cuando quieres acceder a el desde el constructor este te aparece como undefined

Prueba a cambiar dos cosas:

contenidoImages.ts

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

import { contenidoServices } from '../../app/services/contenidos';

@Component({
  selector: 'contenido-images',
  templateUrl: 'contenidoImages.html'
})

export class contenidoImage{

   constructor(private contenido: contenidoServices){}
   //Coloca el @Input después del constructor y tipalo. string, number etc.
   @Input() id: string;
   //Pon el console log fuera del constructor.
   console.log(this.id);
}

A mi así me está funcionando. Solo me ha dado undefined cuando he tratado de imprimirlo entre los {} del constructor.

Fuente

Related Posts:

¿Cómo obtener la respuesta de una llamada asíncrona (AJAX) fuera de ella? – javascript jquery asincrónico
Pregunta: Actualmente tengo esta función: function devuelveButaca(posicion){ var array = posicion.split('_'); var row = array; var column ...
Evitar múltiples toggle con misma clase – javascript
Pregunta: Para un evento toggle con puro javascript lo desarrollo de la siguiente forma: Javascript // Esta clase lo expande. const expandButton = document.querySelector('.expand-button'); expandButton.addEventListener('click', ()=> { ...
Validación de datos nulos en una función – javascript
Pregunta: Tengo la siguiente función pero al momento validar todos mis datos me los registra todos a excepción del los "containers" que son grids y ...
Como poner una imagen de fondo a pantalla completa – javascript jquery html5
Pregunta: Como puedo hacer que la imagen abarque todo el tamaño de la pantalla. Se que de las propiedad min-width y min-heigth pero ellas no ...
Error de: Uncaught TypeError: url.indexOf is not a function por Jquery – javascript jquery
Pregunta: En el navegador, reviso en inspeccionar elemento, y me sale el siguiente error: Uncaught TypeError: url.indexOf is not a function Me imagino que es ...
Como validar array checkbox – javascript php jquery
Pregunta: Que tal buen dia, alguien me podria decir como se puede hacer para que cuando presione el boton "BAJAR DATOS" si este esta vacio ...
Uso de js y c# en unity. ¿Igual rendimiento? – javascript c# unity3d
Pregunta: Estoy comenzando con unity . Y veo que se pueden usar c# y js para programar. Mi pregunta es si tanto c# como js ...
Como cambiar una propiedad html dependiendo del valor de un perfil recogido de clase java – javascript jquery html
Pregunta: Tengo una caja de texto en la que me gustaría poder escribir o no dependiendo del perfil que utilice la aplicación. Esta caja de ...
Agregar marcador especifico a una localización Google Maps – javascript google-maps
Pregunta: ¿Cómo podría añadir un marcador personalizado en Google maps? Actualmente el código que tengo es el siguiente: var locations = [ ['Bondi Beach', -33.890542, ...
Usar variable en otra función con javascript – javascript html app
Pregunta: Primero que todo voy a dejar un enlace donde pueden ver el ejemplo funcionando de manera completa. Enlace a la pagina AQUI El valor elegido en ...
Ocultar y Mostrar con Mapa de Google – javascript c# asp.net
Pregunta: Tengo un div en mi página ASP.NET que contiene un Mapa de Google, y necesito mostrarlo y ocultarlo pero no me funciona. Este es el ...
Copiar valor a un input que esta dentro de un footer de un datatable – javascript jquery datatables
Pregunta: Estoy usando los DataTables de jQuery y me estoy encontrando con el siguiente problema: cuando pulso en un botón necesito pasarle un valor con ...
¿Cómo rellenar cada circulo al pasar el mouse encima? – javascript jquery html
Pregunta: ¡Hola! Estoy practicando jQuery, y me gustaría poder hacer como un ranking. A lo que quiero llegar es que cada vez que el mouse ...
convertir array a Map en javascript – javascript map nodejs
Pregunta: quiero convertir un arreglo a Map(), en este console "console.log(arrayParaMap);" sale undefined el ejemplo que uso es este //example {a:1,a:2,a:1,b:1,b:5,b:6} el map que prentendo obtener es ...
como iterar un objeto en nodejs – javascript nodejs
Pregunta: Hice esta función: const obj = ; const objMapped = obj.reduce((acc, item) => { ...

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *