单击模态内的按钮后更改父组件中按钮的名称 (Angular 7)

Question

我正在开发一个 Angular 7 项目，我想在点击子组件内的按钮后更改父组件的按钮名称，这是一个模式。

目前，当我从父级点击 "Button A" 时，模式打开。之后，当我从模态中单击 "Button B" 时，我希望父级的 "Button 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)="your function to change the button text" 就像这样：

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

并且在您的父组件中，您可以根据需要将按钮文本更改为其他文本，只要按钮文本是一个变量，或者您可以访问按钮组件并更改文本，但这听起来比您更复杂需要它

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

Change the name of a button in the parent component after clicking on a button inside modal (Angular 7)