Как мне вызвать функцию из другого компонента

Question

Я хотел бы вызвать функцию из другого компонента.

Для более подробного описания у меня есть модуль с 3-4 различными компонентами внутри.Одним из них является боковая панель, боковая панель содержит метки со ссылками на другие компоненты.Один из этих связанных компонентов содержит таблицу, которая может быть отсортирована по 3/4 различным функциям.

Ранее я вручную писал код боковой панели в компоненте, в котором были таблицы для работы этого кода.

Мой основной компонент содержит левый и правый столбец, левый столбец никогда не изменяется и содержит одинвнешний компонент и боковая панель, меняется правый столбец.

<div class="wrapper">
    <div class="leftCol">
        <info></info>
        <sidebar></sidebar>
    </div>
    <div class="rightCol">
        <router-outlet></router-outlet>
    </div>
</div>

Внутри боковой панели я сделал такую ​​метку:

 <label [routerLink]="['/users']" (click)="sortByName('all'); currSort='abc'">ABC</label>

Чего я хочу достичь, когда нажимаю эту кнопкуметка должна открывать / users, которая работает, но не выполняет команду sortByName, расположенную в компоненте users.

sortByName(str) {
    this.users = [];
    let token = localStorage.getItem('feathers-jwt');
    this.userService.getUsers(token).subscribe(res => {
      let users = res.data.sort((a, b) => {
        if (a.lastname.toLowerCase() < b.lastname.toLowerCase()) return -1;
        if (a.lastname.toLowerCase() > b.lastname.toLowerCase()) return 1;
        return 0;
      });
      for (let i = 0; i < users.length; i++) {
        let char = users[i].lastname.charAt(0).toUpperCase();
        if (str == 'all' || char == str.toUpperCase()) {
          let object = { name: char, array: [] }
          for (let j = 0; j < users.length; j++) {
            if (char == users[j].lastname.charAt(0).toUpperCase()) {
              object.array.push(users[j]);
              users.splice(j, 1);
              j = -1;
            }
          }
          i = -1;
          this.users.push(object);
        }
      }
      this.clicks = 0;
    }, err => {
      this.toast.error('Loading users', 'FAILED')
    })
  }

Поместить эту функцию в sidebar component.ts тоже не удалось.

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

Заранее спасибо.

Answer 1

Если это не братья и сестры: Заменить Boolean из другого компонента в angular 4

Если вы хотите получить доступ к методу дочернего компонента: Как вызвать метод компонента-брата в angular4

Answer 2

Вы можете добавить параметр правила сортировки в ваш routerlink (ключевое слово: paramMap). Тогда компонент, отображающий пользователя, может содержать функцию сортировки, или лучше вызывать службу сортировки в зависимости от заданных параметров.https://angular.io/tutorial/toh-pt5#extract-the-id-route-parameter Компоненты должны содержать только те поля и методы, которые им действительно нужны / используются.Все остальное должно быть выделено для различных компонентов, модулей и (общих) сервисов