Измените имя кнопки в родительском компоненте после нажатия на кнопку внутри модального (Angular 7)

Question

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

В настоящее время, когдаЯ нажимаю на кнопку «A» у родителя, открывается модал.После этого, когда я нажимаю кнопку «B» из модального окна, я хочу, чтобы «Кнопка A» от родителя сменила, например, свое имя на «C».Я пытался использовать localStorage, но это не сработало.У вас есть идеи, как это сделать?

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

Answer 1

Обмен данными между дочерним и родительским компонентами осуществляется через генераторы событий. Сначала вы определяете вывод события в своем дочернем компоненте следующим образом:

@Output() clickedButton = new EventEmitter<Observable<any>>();

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

this.clickedButton.emit(/* here goes any data you wanna pass to the parent component if its the case otherwise can be empty*/);

далее в шаблоне родительского компонента просто добавьте (clickedButton) = "ваша функция для изменения текста кнопки" примерно так:

<child-component (clickedButton)="changeButtonText($event)"></child-component>

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

changeButtonText($event:any){
this.buttonTextVariable = 'C'
}