Question

我收到以下错误：

ERROR TypeError: Cannot read property 'buttonToast' of undefined

当我尝试从 ionic项目中的另一个.ts文件导入buttonToast时。这是我正在尝试的代码：

firstfile.ts

import { Injectable } from '@angular/core';
import { ToastController, ToastOptions } from 'ionic-angular';

@Injectable()
export class ToastProvider { 
    toast: any;
    constructor(public toastCtrl: ToastController, public toastOptions: ToastOptions) {

    }
buttonToast(toastMessage) {
    this.toast = this.toastCtrl.create({
        message: toastMessage,
        position: 'middle',
        showCloseButton: true,
        closeButtonText: "OK",
        cssClass: "sessionToast",
    });
    this.toast.present();
    }
}

secondfile.ts

import { ToastProvider } from '../providers/toast/toast';
import { Component,ViewChild } from '@angular/core';

export class SignupPage {
    toastCtrl: ToastProvider
        constructor(public navCtrl: NavController, public navParams: NavParams) {
    }

    ionViewDidLoad() {
        console.log('ionViewDidLoad secondPage');
    }


    alertCtrl(){
        this.toastCtrl.buttonToast("Please sign in with your credentials");
    }
}

当我从some.html中的按钮单击函数alertCtrl（）时，我试图调用它。谁能说我在哪里做错了？

Answer 1

将ToastProvider注入您的组件。另外，请确保ToastProvider已注册在providers: []或使用它的模块的提供者AppModule的列表中。在angular 7中，您还可以创建可注射服务并使用以下命令以root用户身份使用它们：

@Injectable({
  providedIn: 'root',
})

并在构造函数中使用它：

 constructor(public navCtrl: NavController, public navParams: NavParams, public toastProvider: ToastProvider ) { }

现在使用this.toastProvider

进行访问

alertCtrl(){
        this.toastProvider.buttonToast("Please sign in with your credentials");
    }

Answer 2

在app.module中，添加provider。

注意：ToastProvider接受构造函数参数，因此我们需要一个Factory来创建该对象。它是app.module（最后几行）的一部分

其他导入：

import { ToastProvider } from '../pages/home/toast'
import { ToastController, ToastOptions } from 'ionic-angular';

模块定义：

@NgModule({
  declarations: [//no change
  ],
  imports: [//no change
  ],
  bootstrap: [IonicApp],
  entryComponents: [//nochange
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}, {provide: ToastProvider, useFactory:ToastProviderFactory, deps:[ToastController ] }
  ]
})
export class AppModule {}
export function ToastProviderFactory(tc) {
  return new ToastProvider(tc, null);
}

在Home.ts页面（或您要使用服务/提供者的位置）中，在构造函数中定义/注入ToastProvider：

export class SignupPage {

        constructor(toastCtrl: ToastProvider, public navCtrl: NavController, public navParams: NavParams) {
    }

    ionViewDidLoad() {
        console.log('ionViewDidLoad secondPage');
    }


    alertCtrl(){
        this.toastCtrl.buttonToast("Please sign in with your credentials");
    }
}

经过测试可以在Stackblitz中工作。

从另一个TS文件导入功能

2 个答案: