Угловое событие щелчка 2/4 в дочернем компоненте шоу в родительском

Question

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

У меня есть родительский (quote-results) компонент с двумя дочерними компонентами:

<quote-table></quote-table>
<call-back-pop-up *ngIf="showCallBackPopUp"></call-back-pop-up>

У меня есть кнопка с событием click в дочернем компоненте 'quote-table':

<button class="button-secondary" (click)="showCallbackToggle()">Request a callback</button>

И есть функция для события click в этом дочернем компоненте 'quote-form' и @Output():

@Output() showCallBackPopUp;

showCallbackToggle() {
  this.showCallBackPopUp = true;
}

У меня также есть @Input() в родительском компоненте (quote-results):

 @Input() showCallBack: boolean;

Мне бы хотелось, чтобы компонент call-back-pop-up отображался в событии click, инициированном внутри "quote-table"

Я попытался переключить @Input и @Output, используя Boolean для этого и эмиттера, но мне не повезло.

Что я делаю не так и как мне заставить это работать?

Answer 1

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

Вот как ребенок будет излучать событие:

@Output() showCallBackPopUp = new EventEmitter();

showCallbackToggle() {
  this.showCallBackPopUp.emit(true);
}

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

тогда родитель связывается с ним в шаблоне так:

<quote-table (showCallBackPopUp)="showCallBackPopUp = true"></quote-table>

и тогда вы сделали. Синтаксис () является стандартным синтаксисом привязки событий Angular, так же как вы привязываете к событию click, которое ваша кнопка испускает как часть нормального API HTML5. Если вы не дадите аргументов @Output(), тогда именем события будет имя переменной (в данном случае "showCallBackPopUp"), но вы также можете сделать что-то вроде @Output('customEventName'), которое изменит имя события на любое Строка, которую вы вставили. Таким образом, ваша привязка должна быть (customEventName)="... делать что угодно.."

Вы также можете получить значение, которое было отправлено с помощью ключевого слова $event в шаблоне, например:

<quote-table (showCallBackPopUp)="showCallBackPopUp = $event"></quote-table>

если вы хотите, чтобы ваш ребенок мог излагать истину или ложь и чтобы ваш родитель реагировал соответствующим образом.