Call a Page method within a Component

Ionic Framework ionic-v3
1

hi all!

I’m trying to call a method from a Component that belongs to a Page.

The reason for this is because I’m loading items dynamically into a wrapper page. The wrapper page is just a component holder, i.e., it will load components based in NavParams parameters, for instance:

export class WrapperPage {
    static get parameters() {
        return [[NavController], [NavParams], [DynamicComponentLoader], [Injector], [ElementRef]];
    }

    constructor(nav, navParams, dcl, injector, elementRef) {
        this.nav = nav;
        this.dcl = dcl; 
        this.injector = injector;
        this.elementRef = elementRef;
        this.component = com[navParams.data.componentName];
        this.action = navParams.data.action;
        console.log('Component to load: ' + this.component);
    }

    ngOnInit() {
        this.dcl.loadIntoLocation(this.component, this.elementRef, 'component-selector');
    }

    testing() {
        console.log('this is testing() method from Page');
        // involve this.action
    }
}

For example, the components may have a button that call testing() method.

Is there a way to call a method that belongs to a Page from a Component?

Regards,

2

see http://learnangular2.com/viewChild/

3

Hi @aaronksaunders, I guess I didn’t make myself clear.

For what I read, ViewChild allows you to invoke a method that belongs to a child component from a parent page.

My wrapper page loads components into it. What I wanted to ask is how to call parent page method from within a component.

I will extend the example:

@Page({
     templateUrl: 'path/to/html'
})
export class ParentPage {
    static get parameters() {
        return [[NavController], [NavParams], [DynamicComponentLoader], [Injector], [ElementRef]];
    }

    constructor(nav, navParams, dcl, injector, elementRef) {
        this.nav = nav;
        this.dcl = dcl; 
        this.injector = injector;
        this.elementRef = elementRef;
        this.component = com[navParams.data.componentName];
        this.action = navParams.data.action;
        console.log('Component to load: ' + this.component);
    }

    ngOnInit() {
        this.dcl.loadIntoLocation(this.component, this.elementRef, 'component-selector');
    }

    testing() {
        console.log('this is testing() method from Page');
        // involve this.action
    }
}

// Component A: maybe will be dynamically loaded into ParentPage
// ...depends on code flow
Component({
    selector: 'my-selector',
    templateUrl: 'path/to/html',
    directives: [IONIC_DIRECTIVES],
})
export class AComponent {
    // Component code
}

<!-- Component HTML tempalte -->
<button (click)="testing()">This is Component A HTML</button>

// Component B: maybe will be dynamically loaded into ParentPage
// ...depends on code flow
Component({
    selector: 'my-selector',
    templateUrl: 'path/to/html',
    directives: [IONIC_DIRECTIVES],
})
export class BComponent {
    // Component code
}

<!-- Component B HTML tempalte -->
<button (click)="testing()">This is Component B HTML</button>

The event binding (click)="testing()" will call the testing() method that belongs to ParentPage, but I’m getting:

ORIGINAL EXCEPTION: TypeError: l_context.testing is not a function
4

Please refer to link. Hope this helps!