时间戳

首页 > 解决方案 > 如何从页面将数据传递给离子自定义子组件

angular - 如何从页面将数据传递给离子自定义子组件

问题描述

我正在尝试将页面中的变量传递给我的自定义子组件并记录为“未定义”。我想要子组件中的这个值，以便我可以调用另一个服务加载子组件。请帮忙。

child.component.ts

    import { Component, Input , OnInit} from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';


@Component({
  selector: 'well-subsurface',
  templateUrl: 'well-subsurface.html'
})
export class WellSubsurfaceComponent {

  @Input() data;
  wID: string;

  constructor(
    public navParams: NavParams) {


  }

  async ngOnInit() {

    this.wID = this.data;
    console.log("------ "+ this.wID)

  }

}

父组件.ts

 import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-asset',
  templateUrl: 'asset.html',
})
export class AssetPage {
 public wID: any;


  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public alertCtrl: AlertController
  ) {
  }

  MenuContorl(assetID) {
  this.wID = wID;
  }
}

父.html

<well-subsurface></well-subsurface>

标签： angularionic-framework

解决方案

假设您正确输入了类似的数据<well-subsurface [data]="wID"></well-subsurface>，那么您不应该使用ngOnInit而是使用ngAfterContentInit.

正如这个角度生命周期钩子文档所说，ngOnInit不保证输入数据已准备好通过@Input，而ngAfterContentInit确实如此。

推荐阅读