2016-11-03 39 views
1
其他頁面

我有一個組件ProcessStep有自己的tshtml文件:ionic2 - 組件到

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: Error in ./Login class Login_Host - inline template:0:0 caused by: No provider for ProcessStep!

我如何準備ProcessStep供應商?

+0

我加入'@ NgModule.providers'後得到新的錯誤:>無提供NavController! – sooon

+0

如何使用共享服務?與供應商相同嗎? 'ProcessStep'是一個包含少量定製的視圖組件。我遵循@huiting的答案,它的工作原理。但是,由於某些原因'ngFor'不起作用。 – sooon

回答

2

如果ProcessStep是由其他組件使用的組件,你應該得到它的參考與@ViewChild

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

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

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