无法从@page ionic2发送到@component数据

时间:2016-05-27 23:14:58

标签: angular ionic2

我尝试使用简单的字符串从@Page与@Component进行通信,但值始终未定义 - 无法理解我在这里做错了什么。

代码.. @page

<createnewqueueitem [qId]="currentQueueId"></createnewqueueitem>

import {CreateItemPage} from '../create-item/create-item';
import {iQueue, iQueueItem} from '../../models/queue';
 import {QueueHeader, contentHeaders } from '../../common/headers';


@Page({
  templateUrl: 'build/pages/queue-info/queue-info.html',
  directives:[CreateItemPage]
})
export class QueueInfoPage {

  queueItem: iQueueItem;
  objQueue:iQueue;
  currentQueueId:number;
  currentQueueName:string;
  queues: any;
  constructor(public nav: NavController, private navParams: NavParams,          private queueService: QueueService) {
    this.nav = nav;
    this.navParams = navParams;


    this.queueItem = <iQueueItem>this.navParams.get('queueItem')
    console.log(this.navParams.get('queueItem'));
    this.currentQueueId = this.queueItem.id;
    this.currentQueueName = this.queueItem.name;

    this.queueService.fetchQueue(this.currentQueueId).then(data => {
      this.objQueue = data;
      this.queues = this.objQueue.items;
      console.log(data);
      // this.queues(data);
    });
  }

  createItem(queueId){
    this.nav.push(CreateItemPage, {
      queueItemId: queueId
    });
  }

}

这是我的@Component

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

@Component({

  selector: 'createnewqueueitem',

  template: `

  <ion-list>
    <ion-list-header>
      ADD ITEM TO QUEUE
    </ion-list-header>
    <ion-item>
      <ion-label floating>Item name</ion-label>
      <ion-input type="text"></ion-input>
      {{qId}}
    </ion-item>
     <button (click)="saveItem()">Save to queue

    </button>

  </ion-list>

  `,

  directives: [IONIC_DIRECTIVES]
})

    export class CreateItemPage {
    @Input() qId: string;
  constructor() {

    console.log(this.qId);
    alert(this.qId);

  }
  saveItem(){

  }
   }

我尝试将数据发送到@Component,就像这样,也是这样

错误在哪里?

1 个答案:

答案 0 :(得分:0)

太奇怪了 - 在我这么久之后......我找到了答案。

  ngOnInit() {
    console.log(this.qId);
    alert(this.qId);
  }

似乎在尝试在构造函数中读取它们时没有设置值...它早到。