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

Я работаю с 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>

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


angular angular-components ionic2 ionic-tabs
person Yeshwant Dasari    schedule 23.08.2016    source источник
comment
Вы не можете поделиться информацией через сервис?   -  person Oliver Renner    schedule 23.08.2016

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

person sebaferreras    schedule 23.08.2016
comment
Спасибо, я вроде понял ваше решение, но у меня есть одно сомнение; в *ngFor=let элемент service.getUsers() этот service.getUsers() будет вызываться при загрузке страницы, так почему же это будет иметь обновленное значение this.userList, которое выполняется в функции filterUsers(ev) при вводе пользователем панель поиска. *ngFor постоянно вызывает service.getUsers() или знает, когда происходит изменение его объекта. Можете ли вы объяснить мне, что стоит за этой концепцией? - person Yeshwant Dasari; 23.08.2016
comment
Насколько я знаю, angular2 просто обновляет представление, когда происходит любое из следующих событий: События (события пользователя, такие как щелчок, изменение, ввод, отправка и т. д.), XMLHttpRequests (например, при извлечении данных из удаленной службы) и таймеры (setTimeout(), setInterval()). Итак, поскольку вы взаимодействуете с представлением, angular пытается проверить, не изменилось ли что-то, и обновляет представление. Дополнительную информацию можно найти в этом замечательном посте< /а>. - person sebaferreras; 25.08.2016