Calling a component function from an injectable class

Question

I have an Injectable Class and a Component class. All I need to do is to call a function in the Component Class from the Injectable class.

INJECTABLE:

Injectable()
export class theInjected 
{

    constructor(private afAuth: AngularFireAuth, private googlePlus: GooglePlus, public alertCtrl: AlertController){

      this.afAuth.authState.subscribe(user => 
        {
          if(user) 
          {
            this.user = this.afAuth.authState; //this means alert('fire user logged in');

         //
         // I need to call the function here goTopage();
         //

          }
          else
          {
            Observable.of(null); //this means alert('fire user logged out');
          }
        }
      );
    }
}

COMPONENT:

@Component({
selector: 'home',
  templateUrl: 'home.html'
})

export class Home
{


constructor(public injected: theInjected){

}

  goTopage()
  {   
    this.navCtrl.setRoot(this.loggedInPage);
  }
}

I simply want a way to call a function existing in a component class from a Injectable.

Thanks!

Possible duplicate of How to call component method from service? (angular2) — Jota.Toledo
– Jota.Toledo, Commented Nov 11, 2017 at 17:13
Not a duplicate, this is a different approach trying Gunter suggestion now! — JamesAnd
– JamesAnd, Commented Nov 11, 2017 at 17:20
Possible XY problem. It's not obvious why goTopage should be defined in a component and not a service. — Estus Flask
– Estus Flask, Commented Nov 11, 2017 at 17:28
@estus because it should be in a component. this.navCtrl.setRoot(this.loggedInPage); does not have any effect (does not change the page) in case its used in the Injectable... It must be used n the component itself. — JamesAnd
– JamesAnd, Commented Nov 11, 2017 at 17:35
This is not an explanation. If it must be used in a component, it can be defined in a service that is injected to a component. — Estus Flask
– Estus Flask, Commented Nov 11, 2017 at 17:41

Günter Zöchbauer · Accepted Answer · 2017-11-11 16:57:13Z

1

Use an observable and subscribe to it in the component.

export class theInjected 
{
  observable = new BehaviorSubject();

  someMethod() {
    this.observable.next('foo');
  }
}

export class Home
{


constructor(public injected: theInjected){
  injected.observable.subscribe(val => this.Topage());    
}

  goTopage()
  {   
    this.navCtrl.setRoot(this.loggedInPage);
  }
}

answered Nov 11, 2017 at 16:57

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JamesAnd Over a year ago

The function goTopage() is being called from custructor even before the value changing (before this runs this.observable.next('foo'); ) ` injected.observable.subscribe(val => this.goTopage()); `

Günter Zöchbauer Over a year ago

You can replace BehaviorSubject with Subject if you don't want that behavior. BehaviorSubject immdiatly emits it's current value to new subscribers. This helps avoiding timing issues when an event is emitted, before the receiver had a chance to subscribe.

JamesAnd Over a year ago

Hello, I did as implemented however its not calling the function goToPage() here is the code, in the home.ts constructor: injected.observable.subscribe(val => this.goTopage()); theInjected in the end of the code where it needs to be called: this.observable.next('a'); and its defined as observable = new Subject();

Collectives™ on Stack Overflow

Calling a component function from an injectable class

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related