Как передать данные (или вызвать событие) из родительского компонента в дочерний компонент, не используя @input decorator в Ionic2

Question

Я работаю с Ionic 2 и у меня есть сценарий использования, когда есть домашняя страница (родительский компонент), а внутри домашней страницы есть макет вкладки, а в Ionic 2 каждая вкладка является отдельным компонентом (дочерние компоненты).

поэтому в одной вкладке я показываю список пользователей, а на домашней странице также есть панель поиска, с помощью которой пользователь может искать других пользователей. Так что теперь, когда пользователь вводит в строке поиска, запускается функция, которая определяется на домашней странице (родительский компонент), но когда эта функция запускается, мне нужно вызвать событие на вкладке пользователя (дочерний компонент), в которой я собираюсь фильтровать список пользователей и отображение на вкладке пользователя. Нужна помощь в решении этого. Ниже мой код

<ion-content>
   <ion-tabs>
        //UsersTab comopnent class needs to know when getUsers function is triggered from home page
       <ion-tab tabTitle="List of Users" [root]="UsersTab"></<ion-tab>
       <ion-tab tabTitle="Tab 2" [root]="Tab2"></<ion-tab>
   </ion-tabs>
</ion-content>
<ion-footer>
    <ion-toolbar>
       <ion-title>
           // getUsers function will be defined is home page component class
           <ion-searchbar (ionInput)="getUsers($event)"></ion-searchbar>
       </ion-title>
    </ion-toolbar>
</ion-footer>

Я надеюсь, что мой вопрос легко понять.

Answer 1

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

Сервис будет отвечать за хранение списка товаров и его фильтрацию:

import { Injectable } from "@angular/core";

@Injectable()
export class SharedService { 

  private userList: Array<string>;

  constructor(){
    this.initialiceUsers();
  }

  public initialiceUsers(){
    this.userList = [
      'Asdf Asdf',
      'Zxc Zxc',
      'Qwer Qwer',
      'Uiop Uiop'
    ];
  }

  public setUsers(users: Array<string>): void{
    this.userList = users;
  }

  public getUsers(): Array<string> {
    return this.userList;
  }

  public filterUsers(ev) {
    // Reset items back to all of the items
    this.initialiceUsers();

    // set val to the value of the searchbar
    let val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.userList = this.userList.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  } 
}

И родительский компонент, и дочерний компонент будут использовать эту службу для отправки значения панели поиска (для фильтрации элементов) и для получения списка элементов, отображаемых в представлении.