单击Angular 2 / Ionic 2上的类之间传输数据

Question

在我的app.html我有一个包含角色列表的侧边菜单。应用程序顶部的工具栏是我landingPage.html的一部分，并显示“应用程序名称：角色”作为标题。我希望这样，每当用户点击新角色时，它都会反映在着陆页的工具栏中。

我的changeRole(newRole)文件中有一个landingPage.ts函数可以执行此操作，但我不知道如何通过app.ts中的点击事件访问它。

如何监听事件，然后将点击的内容发送到另一个类中的函数？

Answer 1

这里有一个很好的资源，详细介绍了组件交互的一些常见模式：

https://angular.io/docs/ts/latest/cookbook/component-communication.html

对于您的用例，您可能希望定义一项服务来封装您的角色＆＃39;值。将该服务注入需要访问该值的组件。

Answer 2

如何从我的回答here全局共享数据注入服务的示例：

在Ionic 2 beta 6中使用提供程序保存全局数据对我来说很有用，我相信它是Angular 2中推荐的做法。

从命令行生成提供程序：ionic g provider GlobalService请注意如何使用@Injectable

修饰生成的服务

在@App课程中注入您的服务;你通过在providers数组中声明它来做到这一点：

  @App({
        templateUrl: 'build/app.html',
              providers: [GlobalService] ,
              config: {} // http://ionicframework.com/docs/v2/api/config/Config/
            })

这将创建一个可在每个页面上访问的提供商的单个实例。无论您何时需要使用它，不在providers数组中声明，但在Page的构造函数中声明：

@Page({
        templateUrl: 'build/pages/new-page/new-page.html',
      })
      export class NewPage{

       constructor(public globalService: GlobalService) {
    }

    someFunction(){
    this.globalService.someGlobalFunction();
    }