Typescript calling a classes function from another class

Question

I have a header.component.ts that should populate a user name once the user is logged in. I'd like to be able to call a function/method on the header.component class from the mainMenuComponent.

This is in the context of angular2. So when I route to my mainmenu.component it should call the header.component to set the user name.

Here is my layout:

app.component:

@Component({
    selector: 'myapp',
    template:`<header userName="{{userName}}"></header>
                        <router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES, HeaderComponent]   
})

@RouteConfig([
  {path:'/', name:'Login', component: LoginComponent, useAsDefault: true},
  {path:'/mainmenu', name:'MainMenu', component: MainMenuComponent},])

header.component:

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

export class HeaderComponent {
       @Input() userName;

       updateHeaderUserName(userName:string) {
                this.userName = userName;
           }
}

login.component:

onSubmit() {
   this._router.navigate( ['MainMenu', {userName: 'John Doe'}] );
}

mainMenuComponent:

export class MainMenuComponent implements OnInit { 

    constructor(
        private _routeParams:RouteParams){}

        ngOnInit() {
          // CAN I CALL THIS FUNCTION OFF THE HEADER.COMPONENT HERE???
          updateHeaderUserName(this._routeParams.get('userName'));     

        }

}

As you can tell from the code I've done attempted a solution using routing params but I can pass the userName all I want when routing to facilitate route component communication but it's not clear if the HeaderComponent is in memory how I call a public function it has?

Answer 1

As @micronyks said, the shared service seems to be the solution. The important thing not to miss is to share the same instance of the service by components.

You can define this service within providers when bootstrapping your application:

bootstrap(MainComponent, [ SharedService ]);

Then you can inject it into both components, LoginComponent and MainMenuComponent. This way you can share the data without calling an updateHeaderUserName on a component you can't reference...

For more detils about dependency injection and hierarchical injectors, you could have a look at this answer:

• What's the best way to inject one service into another in angular 2 (Beta)?