如何在不使用 Ionic2 中的 @input 装饰器的情况下将数据（或引发事件）从父组件传递到子组件

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

父组件和子组件都将使用该服务发送搜索栏的值（以过滤项目）并获取要在视图中显示的项目列表。

如何在不使用 Ionic2 中的 @input 装饰器的情况下将数据（或引发事件）从父组件传递到子组件

how to pass data (or raise a event) from parent component to child component without using @input decorator in Ionic2

ionic2

ionic-tabs

angular-components

angular