How to call ionic component method from a javascript ( index.html ) - Urgent Please

Ionic Framework
1

Ionic version : 4.7.0

I have an ionic web application where I need to integrate third party javascript files. There are couple pf functions I have defined in javascript ( these defined in index.html.) . There are listeners added by the third party javascript which will trigger these methods whenever event happens.

in index.html

<script src="https://test.testservice.net/includes/test.min.js"></script>
<script>
function a (data){
    //. I want to call ionic component method here 
   // TestPage.submitData
}

function b(){

}
</script>

Ionic component…

@IonicPage({name: 'TestPage',segment: 'test',..........})

@Component({selector: "page-test",templateUrl: "test.html"})

export class TestPage implements OnInit, OnDestroy {

constructor(){
.......


  submitData(data) {
   ......
    // call api.. 
   this.api.submitData(data); 
  }
}
}

How can I get instance of current view controller component . I tried this.navCtrl.getActive() but this returns undefined in method a or b

Please let me know what is the right way to do this.

2
1 Like
3

Thanks… I tried to add more details. Hope this helps

4

That is still super vague. But, from what I gather, you are trying to call a method in a view “IonicPage controller” from your index where you are listening for events from a 3rd party library.

If this is this case, that is bad design. You should abstract out your API call so it can be called from both locations.

If you need additional help, you will need to provide actual code examples using proper code blocks.

5

@twestrick Thanks for your time. have updated my question. Pardon for my language.

Regarding integration, I do not much control on the thirdparty javascript file. I need to consume the data returned in method a and call my ionc app specific components to handle it.

6

I am not familiar with Angular (at least that is what your component looks like), but in general as I said, it is bad practice to do what you are trying to do. Why not abstract out the submitData logic into a service class that both your component and index can call?

7

Yes I can move to service component. How do I get reference to the service component in javascript

8

I just do the following:

import { CommunityService } from '@/services/community-service'

const service = new CommunityService()

where CommunityService is a class:

export class CommunityService {
    public async getAll(): Promise<ApiResponse> {
        // do stuff
    }
}
9

Sorry I’m not getting you. In index.html > java script method how do I get reference to CommunityService

10

With a little Googling, maybe:

1 Like
11

@twestrick
All my app services and components are initialized within ionic.

In index.html when I try initialize service I get undefined error.

Please let me know if there is any right way to do this. Finally I want the control to be in ionic page component.

12

This is what I’m trying to do …

index.html → javascript function → Call a ionic service/component function → show next view in ionic app.

I’m trying to find the right away implement below integration

**javascript function -> Call a ionic service/component function**
13

Please let me know if we have any solution for this. Thanks

15

This is how I was able to resolve …

When ionic service components gets initializes I’m calling a method defined in javascript ( defined in index.html) which will capture the reference of the service. Later in method a/b I’m calling the required service functions through reference.