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

Add a Comment

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