Передать функцию для ребенка с неизвестным параметром в Angular

Question

У меня есть 2 компонента (Бренд, Продукт) с нумерацией страниц и поиском. Итак, я хочу создать повторное использование страниц. Этот компонент paginator получает

@Input() currentPage: number;
@Input() totalPage: number;

Теперь у меня есть (3: текущий, 6: всего)

1, 2, [3], 4, 5, 6

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

this.getAllProduct(currentPage, totalPage);

Но когда я выполняю поиск с разбивкой на страницы, функция поиска по компоненту бренда (продукта) выглядит следующим образом:

searchBrand(name);

или

searchProduct(name, sku, brand, category, price, ....);

Как передать эту функцию для дочернего компонента ( paginator), когда я нажимаю на страницу, она вызывает эти функции

Answer 1

Angular имеет эту страницу документации с примерами и объяснениями того, как заставить ваши компоненты взаимодействовать. Внимательно прочитайте, и вы получите все необходимые инструменты: Взаимодействие с компонентами .

Чтобы ответить на этот конкретный c вопрос:

• Если действие происходит от родителя, и вы хотите вызвать метод, который существует в дочерних элементах, используйте @Input или ViewChild:

  • С помощью @Input вы можете прослушивать изменения в дочернем элементе, реализуя метод ngOnChanges.
  • С помощью @ViewChild вы можете вызывать дочерний метод непосредственно из родительского элемента. Это для более сложного использования, поэтому я сомневаюсь, что вы хотите это для этого случая.

• Если действие начинается с дочернего элемента, и вы хотите вызвать метод, который существует в родитель, затем используйте @Output.

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