我正在开发一个 Angular 7 项目,我想在单击子组件中的按钮后更改父组件中按钮的名称,这是一个模态。
目前,当我从父级单击“按钮 A”时,模式会打开。之后,当我从模式中单击“按钮 B”时,我希望父级中的“按钮 A”将其名称更改为“C”。我曾尝试使用 localStorage,但它没有用。你对如何做到这一点有任何想法吗?
先感谢您!
我正在开发一个 Angular 7 项目,我想在单击子组件中的按钮后更改父组件中按钮的名称,这是一个模态。
目前,当我从父级单击“按钮 A”时,模式会打开。之后,当我从模式中单击“按钮 B”时,我希望父级中的“按钮 A”将其名称更改为“C”。我曾尝试使用 localStorage,但它没有用。你对如何做到这一点有任何想法吗?
先感谢您!
从子组件到父组件的通信方式是通过事件发射器,首先您在子组件中定义事件输出,如下所示:
@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'
}