打字稿从另一个班级调用班级功能

问题描述：

我有一个header.component.ts应该在用户登录后填充用户名称。我想能够在header.component上调用一个函数/方法从mainMenuComponent类。打字稿从另一个班级调用班级功能

这是在angular2的上下文中。所以当我路由到我的mainmenu.component时，它应该调用header.component来设置用户名。

这里是我的布局：

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

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'));  

     } 

}

正如你可以从代码告诉我做使用路由PARAMS尝试了解决方案，但我可以传递用户名路由到简化路由组件通信，当所有我想要的，但目前还不清楚如果HeaderComponent是在内存中我如何称其为公共职能？

我觉得这是标头和主components'否则你也可以使用'EventEmitter'之间'没有关系调用'updateHeaderUserName'方法。现在，据我所知，我认为你应该考虑在Angular2中使用'service'更具体的'组件间的共享服务'。 – micronyks

我其实已经尝试了EventEmitter，但它并没有工作，我想知道为什么直到我看看如何

和是不相关的。我简单地玩弄了而不是

，但你的评论只是证实了我对元素范围的怀疑，这很有道理！ – Justin

答

正如@micronyks所说，共享服务似乎是解决方案。重要的是不要错过的是通过组件共享相同的服务实例。

这样引导您的应用程序时，您可以定义供应商在这个服务：

bootstrap(MainComponent, [ SharedService ]);

然后，你可以把它注射到两个组件，LoginComponent和MainMenuComponent。这样，您就可以共享数据，而无需调用您不能引用一个组件上的updateHeaderUserName ...

有关依赖注入和分层注入更多detils，你可以看看这个答案：

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

谢谢！我一直在试图考虑

和之间的范围，以解释为什么EventEmitter不起作用。一直在阅读，以获得更深入的路由知识，但简单的服务是我无法找到的答案。 – Justin

一旦我拥有了我的共享服务，使用它的组件如何知道服务所包含的值何时发生变化？如果我的MainMenuComponent更新了SharedService.userName，HeaderComponent的模板如何知道ShareService.userName已更新？ – Justin

要做到这一点，您可以在其中添加一个'EventEmitter'属性。这样，你可以在服务中实现'updateHeaderUserName'方法：'updateHeaderUserName（username）{this.usernameEmitter.emit（username）; }'。另一方面，组件可以在这个发射器上订阅通知：'this.usernameEmitter.subscribe（（newValue）=> {console.log（'username updated'）;}）;' –

打字稿从另一个班级调用班级功能

相关推荐