2

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>
4
  • ¿Puedes plantear la pregunta de otra forma o ser un poco más específico?. Personalmente no entiendo que tratas de hacer. Prueba a explicarlo de otra forma a ver si podemos ayudarte.
    – Findelias
    el 6 abr. 2017 a las 6:03
  • @Findelias hola, edité la pregunta, si lo entiendes un poco mejor. el 6 abr. 2017 a las 14:51
  • Me ha costado acabar de leer la pregunta, pero creo q se lo que pasa, puede ser q en el constructor no esté definido si lo pasas como un input, utiliza los hooks ngOnInit, ngAfterViewInit el 7 abr. 2017 a las 10:15
  • @JoseHermosillaRodrigo vale, muchas gracias, si era meterlo dentro de los hooks. el 7 abr. 2017 a las 14:58

3 respuestas 3

1

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().

0

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

0

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.