Question

我的组件ProcessStep有自己的ts和html文件。：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-process-step',
  templateUrl: 'process-step.html'
})
export class ProcessStep {
totalsteps:number;
steparray:Array<boolean>;
currentstep = 1;

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {
    console.log('Hello ProcessStep Page');
  }
  populateStep(n:number){
    for(var i =1; i<=n ; i++){
      this.steparray.push(false);
    }
  }

}

ProcessStep用于许多具有不同step值的网页。当我从其他页面拨打populateStep()时：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ProcessStep } from '../process-step/process-step';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class Login {
  constructor(public navCtrl: NavController,
              public modalCtrl:ModalController,
              public loadingCtrl:LoadingController,
              private processstep:ProcessStep
              ) {
                processstep.populateStep(5);///<-- give error
              }

我收到了一个错误：

EXCEPTION：./Login类中的错误Login_Host - 内联模板：0：0 引起：没有ProcessStep的提供者！

如何为ProcessStep准备提供商？

Answer 1

如果ProcessStep是其他组件使用的组件，则应使用@ViewChild

获取对它的引用

import { ViewChild, AfterViewInit } from '@angular/core';

class Login implements AfterViewInit {
  @ViewChild(ProcessStep) step: ProcessStep;

  ngAfterViewInit() {
    step.populateStep(5);
  }
}

ionic2 - 组件进入其他页面

1 个答案: