在modal (Angular 7)中单击按钮后,更改父组件中按钮的名称可以通过以下步骤实现:
buttonName
的变量,并初始化为初始按钮名称。buttonName: string = '按钮名称';
<button>{{ buttonName }}</button>
@Output
装饰器和EventEmitter
来创建一个自定义事件,用于在单击按钮后通知父组件。在modal组件的类中添加以下代码:
import { Component, EventEmitter, Output } from '@angular/core';
export class ModalComponent {
@Output() buttonClicked: EventEmitter<void> = new EventEmitter<void>();
// 在按钮点击事件中触发自定义事件
onClickButton() {
this.buttonClicked.emit();
}
}
在父组件的模板中添加以下代码:
<app-modal (buttonClicked)="changeButtonName()"></app-modal>
在父组件的类中添加以下代码:
changeButtonName() {
this.buttonName = '新的按钮名称';
}
通过以上步骤,当在modal组件中单击按钮时,会触发自定义事件buttonClicked
,然后在父组件中的changeButtonName()
方法中更改按钮的名称,从而实现在modal中单击按钮后更改父组件中按钮的名称。
领取专属 10元无门槛券
手把手带您无忧上云