Передача данных между классами по щелчку Угловой 2/Ионный 2

Question

В моем app.html У меня есть боковое меню, которое содержит список ролей. Панель инструментов поверх приложения является частью моего landingPage.html и показывает «Имя приложения: роль» в качестве заголовка. Мне бы хотелось, чтобы всякий раз, когда пользователь нажимает на новую роль, он отображается на панели инструментов целевой страницы.

У меня есть функция changeRole(newRole) в моем файле landingPage.ts, который сделает это, но я не знаю, как получить к нему доступ из события click в моем app.ts.

Как прослушивать событие, а затем отправлять все, что нажал на функцию в другом классе?

Answer 1

Пример того, как внедрить услугу для обмена данными по всему миру от моего ответа here:

---

Использование поставщика для хранения глобальных данных работает для меня в ионическом 2 бета 6, и я считаю, что это рекомендуемая практика в угловых 2.

Сформировать поставщик из командной строки: ionic g provider GlobalService Обратите внимания, как генерируемая служба украшенной @Injectable

Вводите ваш сервис в т он @App класс; Вы делаете это, объявив его в массиве провайдеров:

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

Это создаст один экземпляр поставщика, который является доступным на каждой странице. Везде, где вы должны использовать его, не объявить в массиве провайдеров, но на конструктору Страницу:

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

     constructor(public globalService: GlobalService) { 
    } 

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

Answer 2

Там хороший ресурс здесь подробно некоторые общие закономерности взаимодействия компонентов:

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

Для вашего случая использования, вы, вероятно, хотите, чтобы определить сервис для инкапсулировать значение «роль». Внесите эту услугу в компоненты, которым необходимо получить доступ к этому значению.