как передать данные (или поднять событие) из родительского компонента в дочерний компонент без использования @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

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

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

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

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