打字稿从另一个类调用类函数答案

【问题标题】：Typescript calling a classes function from another class打字稿从另一个类调用类函数
【发布时间】：2016-02-11 14:26:53
【问题描述】：

我有一个 header.component.ts，它应该在用户登录后填充用户名。我希望能够从 mainMenuComponent 调用 header.component 类的函数/方法。

这是在 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'}] );
}

主菜单组件：

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

        }

}

从代码中可以看出，我已经尝试使用路由参数的解决方案，但我可以在路由时传递我想要的所有用户名以促进路由组件通信，但不清楚 HeaderComponent 是否在内存中我如何调用它有什么公共功能？

【问题讨论】：

我认为header & main components 之间没有关系，否则您可以使用EventEmitter 调用updateHeaderUserName 方法。现在，据我所知，我认为您应该考虑在 Angular2 中使用service 更具体的shared service among components。
我实际上尝试了 EventEmitter 但它没有用，我想知道为什么直到我看看
和是如何不相关的。我曾短暂地玩弄过将放在
上，但您的评论只是证实了我对元素范围的怀疑，这是有道理的！

标签： typescript angular

【解决方案1】：

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

您可以在引导应用程序时在提供程序中定义此服务：

bootstrap(MainComponent, [ SharedService ]);

然后你可以将它注入到两个组件中，LoginComponent 和 MainMenuComponent。这样，您无需在无法引用的组件上调用 updateHeaderUserName 即可共享数据...

关于依赖注入和分层注入器的更多细节，你可以看看这个答案：

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

【讨论】：

谢谢！我一直在绞尽脑汁试图思考
和之间的范围，以解释为什么 EventEmitter 不起作用。一直在阅读以获得更深入的路由知识，但一个简单的服务是我找不到的答案。
一旦我拥有了共享服务，使用它的组件将如何知道服务包含的值何时发生了变化？如果我的 MainMenuComponent 更新 SharedService.userName HeaderComponent 的模板如何知道 ShareService.userName 已更新？
为此，您可以在其中添加EventEmitter 属性。这样，您可以在服务中实现updateHeaderUserName 方法：updateHeaderUserName(username) { this.usernameEmitter.emit(username); }。另一方面，组件可以订阅此发射器以得到通知：this.usernameEmitter.subscribe((newValue) => { console.log('username updated'); });
您可以看看 Mark 对此类概念的出色回答：stackoverflow.com/questions/34376854/…
好的！我在我的 SharedService 上使用了 EventEmitter，但我不确定如何捕捉/观看它。需要熟悉 Observable 库。