首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在modal (Angular 7)中单击按钮后,更改父组件中按钮的名称

在modal (Angular 7)中单击按钮后,更改父组件中按钮的名称可以通过以下步骤实现:

  1. 在父组件中定义一个变量来存储按钮的名称。例如,可以在父组件的类中添加一个名为buttonName的变量,并初始化为初始按钮名称。
代码语言:txt
复制
buttonName: string = '按钮名称';
  1. 在父组件的模板中,将按钮的名称绑定到该变量。
代码语言:txt
复制
<button>{{ buttonName }}</button>
  1. 在modal组件中,通过@Output装饰器和EventEmitter来创建一个自定义事件,用于在单击按钮后通知父组件。

在modal组件的类中添加以下代码:

代码语言:txt
复制
import { Component, EventEmitter, Output } from '@angular/core';

export class ModalComponent {
  @Output() buttonClicked: EventEmitter<void> = new EventEmitter<void>();

  // 在按钮点击事件中触发自定义事件
  onClickButton() {
    this.buttonClicked.emit();
  }
}
  1. 在父组件中使用modal组件,并监听自定义事件。

在父组件的模板中添加以下代码:

代码语言:txt
复制
<app-modal (buttonClicked)="changeButtonName()"></app-modal>

在父组件的类中添加以下代码:

代码语言:txt
复制
changeButtonName() {
  this.buttonName = '新的按钮名称';
}

通过以上步骤,当在modal组件中单击按钮时,会触发自定义事件buttonClicked,然后在父组件中的changeButtonName()方法中更改按钮的名称,从而实现在modal中单击按钮后更改父组件中按钮的名称。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券