Импорт функции из другого файла TS

Question

Я получаю следующую ошибку:

ERROR TypeError: Cannot read property 'buttonToast' of undefined

при попытке импортировать buttonToast из другого файла .ts в ионном проекте .вот код, который я пытаюсь:

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");
    }
}

Я пытаюсь вызвать его, когда нажимаю на кнопку alertCtrl () с кнопки some.html.Кто-нибудь может сказать, где я делаю ошибку?

Answer 1

В 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 ..

Answer 2

Введите ToastProvider в ваш компонент.Также убедитесь, что ToastProvider зарегистрирован в списке провайдеров providers: [] для AppModule или модуля, где он используется.В angular 7 вы также можете создать свои инъекционные сервисы и сделать их доступными в корне, используя:

@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");
    }