input component angular2

Question

input component angular2

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

2

Do you know if you can get the data from the constructor that is obtained from the input component that define an 'id' ?, That is what I do is make a directive <contenido-images [id]="contenido.id"></contenido-images> that [id] sent a number that receives it ContentImages.ts and I get it by means of @Input() id in templateUrl if I get what I sent to print it so {{id}} .

But what I want is to get that id from contenidoImages.ts to consult a service and bring more data and then if I print it in templateUrl: 'contenidoImages.html' , I do a console.log(this.id) but I get undefined , I do not know why it does not obitiene but if you print it in the template.

I show you how is my code:

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>

ContentImages.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);
}

ContentImages.html

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

javascript angularjs-2.0 ionic2

asked by Albert Arias 06.04.2017 в 00:55

source

3 answers

0

What you can do in those cases is this:

    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){
       }
  }

and in your template

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

As far as I understand, the inputs are not necessarily available at the moment the component is built, that's why when you want to access it from the constructor, this appears as undefined

answered by 07.04.2017 в 02:30

0

Try changing two things:

ContentImages.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);
}

This is how it works for me. It just gave me undefined when I tried to print it between {} of the constructor.

answered by 07.04.2017 в 11:59

Why do I get that error when I want to insert a button in "Android Studio"? How do you load and run an [EXE] program in memory on Windows?

score 1 · Accepted Answer

What happens is that the constructor starts by default and does not change, that is, the component was initialized before loading the component that contains that id, so according to your needs you must use ngOnChanges() or ngAfterViewInit() .