Как получить доступ к методам компонента Angular2 из другого компонента?

Я работаю над NgForm, у которого должна быть кнопка «Сбросить все поля». Я могу получить доступ к NgForm.reset() для сброса большинства полей. Но у меня есть несколько экземпляров пользовательского компонента множественного выбора, который исключен из метода сброса.

Пользовательский множественный выбор — это просто <angular2-multiselect> с прикрепленными к нему <items>, и у него есть кнопка «X», которая очистит его значение (я), что отлично работает. Это происходит через (onDeSelectAll) = "onDeSelectAll($event) на <angular2-multiselect>.

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

<multiselect name = "myMultiselect"/>
   // Lots of options

<button (click) = "myMultiselect.onDeSelectAll($event)"/>
   // or
<button (click) = "ResetMultiSelect($event)"/>

Я также пытался сделать свой собственный код, который делает то же самое. Вот как я пытаюсь сделать это в машинописи:

public myMultiselect : MultiSelect;

function ResetMultiSelect(items: any)
{
   myMultiselect.selectedItems = items;
   // or
   this.myForm.myMultiselect.selectedItems = items;
}

Я пытался установить myMultiselect.selectedItems значение null, undefined и [] (пустой массив). Из трех только [] работает. Но когда я смотрю в инспекторе, он говорит мне, что this.selectedItems.split is not a function. Таким образом, хотя я получаю желаемый результат таким образом, я получаю его неправильно.

Итак, мой вопрос в основном либо

A: Есть ли способ установить selectedItems моего multiselect как нечто, очищающее все параметры функции, запускаемой button?

или Б: Есть ли хороший способ для моей кнопки найти и вызвать мой метод multiselectComponentonDeSelectAll()?

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
4
0
63
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте переменные шаблона angular, чтобы получить ссылку на ваш угловой компонент. Затем вы можете легко вызвать общедоступный метод, который вам нравится, для вашего дочернего компонента, например:

<multiselect #myMultiselect></multiselect>
<button (onClick) = "myMultiselect.onDeSelectAll($event)">Click Here</button>

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

Это было прекрасно. $event, который я получил, сделав это таким образом, не работал с onDeSelectAll(), поэтому я просто создал новый метод в своем машинописном тексте, который устанавливает выделение в пустой массив вместо myMultiselect.selectedItems = [], а затем обновил представление. Затем я вызвал этот метод из моей кнопки, как в вашем примере.

Tom 19.12.2022 18:12

Другие вопросы по теме