首页
学习
活动
专区
工具
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中单击按钮后更改父组件中按钮的名称。

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

相关·内容

分层 Blazor 组件

作为加入单页应用程序 (SPA) 队伍最新框架,Blazor 有机会在其他框架(如 Angular 和 React)最佳特性基础之上构建而成。...获得单击,此按钮便会立即弹出填充有以下三层 DIV:页眉、正文和页脚。 必须处理模板化组件和级联参数,才能创建模式对话框所需嵌套组件。...模式对话框可视需要在页眉处添加“关闭”按钮,并添加与对话框大小或动画相关其他属性。所有此类信息都可以自定义数据传输对象组合,并通过树进行级联。...按钮内容是通过模板化属性 ChildContent 进行捕获。请注意, Blazor ,模板属性 ChildContent 自动捕获元素整个子标记。... Toggle 组件,Id 级联值用于设置数据目标属性值。 Bootstrap 行话,对话框切换按钮数据目标属性标识,要在用户单击切换按钮时弹出 DIV ID。

8.3K10

AWT常用组件

复选框(Checkbox) 复选框是一种输入信息组件,拥有“状态”特性,通过鼠标单击复选框操作可以将其状态从“true”更改为“false”,或从“false” 更改为“true”。...单选按钮实现(结合使用CheckboxGroup类) 单选按钮是一种输入信息组件,拥有“状态”特性,通过鼠标单击单选按钮操作可以将其状态从“true” 更改为“false”,或从“false”...作为同一组多个单选按钮组件是互斥,即每一时刻只能有一个组件状态为“true”,从而实现单项选择。 AWT,单选按钮对象创建也是通过 Checkbox类实例化。...)和模式(modal)两种,当某个模式对话框被打开,该模式对话框总是位于它窗口之上,模式对话框被关闭之前,窗口无法获得焦点。...最后,将两个按钮添加到窗口布局,并设置窗口最佳大小并可见。 这样,运行程序,会显示一个窗口和两个按钮,点击按钮会显示对应对话框。

6710

AngularDart 4.0 高级-路由概述 顶

当用户点击按钮,从下拉框中选择,或者响应来自任何来源其他刺激时,您都可以进行命令式导航。并且路由器浏览器历史记录记录活动,所以后退和前进按钮也起作用。...路由器插座 当此应用浏览器URL成为/#/heroes时,路由器将该URL与名为HeroesRouteDefinition匹配,并在放置宿主视图HTMLRouterOutlet显示HeroesComponent...点击“返回”按钮,应用程序返回英雄列表,显示更改英雄名称。 注意名称更改立即生效。 如果您点击了浏览器后退按钮而不是“返回”按钮,该应用程序也会将您返回到英雄列表。...危机详情显示列表下方同一页面上子视图中。 改变危机名称。 请注意危机列表相应名称不会更改。 ?...与英雄细节不同,当您键入更新时,危机细节更改是暂时,直到您通过按下“Save”或“Cancel”按钮保存或放弃它们。 这两个按钮都回到危机中心及其危机列表。 不要单击任一按钮

6.1K20

AngularDart 4.0 高级-生命周期钩子 顶

开发人员可以通过Angular core库实现一个或多个Lifecycle Hook界面来挖掘该生命周期中关键时刻。 每个接口都有一个单一钩子方法,其名称是以ng开头接口名称。...ngOnInit Angular首次显示数据绑定属性并设置指令/组件输入属性,初始化指令/组件第一次ngOnChanges之后调用一次。...Counter 演示组件和指令组合,每个组件都有自己钩子。 在此示例,每次组件递增其输入计数器属性时,CounterComponent都会记录更改(通过ngOnChanges)。...peek-a-boo存在以显示Angular如何按预期顺序调用钩子。 此快照反映用户单击“创建...”按钮然后单击“销毁...”按钮后日志状态。 ?...您可以期待Angular创建组件立即调用ngOnInit方法。 这就是深度初始化逻辑所属地方。

6.1K10

day02_品优购电商项目_02_前端框架AngularJS入门 + 品牌列表实现 + 品牌列表分页实现 + 增加修改删除品牌实现 + 品牌分页条件查询实现_用心笔记

目标7:完成品牌管理条件查询功能 - 1....ng-click 是最常用单击事件指令,再点击时触发控制器某个方法。...2)rows:每页要显示记录数。 注意:此处rows与上处rows含义区别。 3.3.1 HTML brand.html引入分页组件     <!...response.message);                     }             }         );     } 4.3.2 HTML 绑定表单元素,我们用ng-model指令,绑定按钮单击事件我们用...,当我们点击复选框判断是选择还是取消选择,如果是选择就加到数组,如果是取消选择就从数组移除。

8.9K64

如何在 React 中点击显示或隐藏另一个组件

React 是一种流行 JavaScript 库,用于构建动态用户界面。一个 React 应用程序,有时需要一个按钮或链接来触发显示或隐藏一个相关组件。...使用 React 状态管理控制组件可见性React 状态是指组件私有的数据,它决定了组件呈现时外观和行为。当状态更改时,组件会重新呈现,以反映这些变化。...全局状态(也称为应用程序状态)则是整个应用程序状态,可以从不同组件访问和修改。本文中,我们将关注本地状态。 React ,使用 useState 钩子可以创建本地状态。...然后,我们组件返回值渲染一个按钮和一个条件渲染 div 元素。当用户单击按钮时,onClick 事件处理函数会调用 setIsVisible 函数,并将 !...这些示例可以用作参考,帮助你自己 React 应用程序实现点击显示或隐藏另一个组件功能。

4.3K10

AngularDart4.0 指南- 表单 顶

禁用窗体提交按钮,直到窗体有效。 建立 按照设置说明创建一个名为表单新项目。 添加angular_forms Angular表单功能位于angular_forms库,该库位于其自己。...顺便说一句,您可以注入数据服务来获取和保存真实数据,或者将这些属性作为输入和输出(请参阅“模板语法”页面输入和输出属性)来绑定到组件。 这不是现在问题,这些未来变化不会影响表单。...点击清除按钮。 文本字段变为空白,如果您更改了power,它将恢复为默认值。 用ngSubmit提交表单 用户应该能够填写表单提交这个表单。...如果没有Angular帮助,你需要做什么才能将按钮启用/禁用状态连接到表单有效性? 对你来说,这很简单: (增强)表单元素上定义一个模板引用变量。 多处按钮引用该变量。...提交标志变为真,表格消失。 您将看到表格显示英雄模型值(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交标志。 当您单击编辑按钮时,该表消失,并且可编辑表单重新出现。

17.4K30

AngularDart4.0 英雄之旅-教程-07路由 顶

当用户在任一视图中点击英雄名称时,导航至所选英雄详细视图。 当用户点击电子邮件深层链接时,打开特定英雄详细视图。 完成,用户将可以像这样浏览应用程序: ?...添加路由 应该在用户点击按钮显示英雄而不是自动显示。 换句话说,用户应该能够导航到英雄列表。 更新pubspec 使用Angular路由(angular_router)启用导航。...要在其他地方导航,用户可以单击AppComponent两个链接之一,或单击浏览器后退按钮。...相反,他们会在此页面上看到一个迷你细节,并且必须单击一个按钮才能导航到完整详细信息页面。...按钮点击事件绑定到一个gotoDetail()方法,该方法应该通过告诉路由器去哪里命令性地导航。 这种方法需要对组件类进行以下更改: 导入angular_router。

17.5K30

如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

用户设计器中进行更改,只需单击一下,就可以使用修改Angular标记更新原始HTML文件。...我们示例,操作是单独选项卡打开设计图面,并使用 Angular标记提供上下文,以及源文件该标记位置。 现在单击链接以相邻选项卡打开设计器。...对于具有集合控件(例如网格列),设计器允许您添加,删除和修改单个成员。 “属性”窗格中找到columns属性,然后单击属性编辑器右侧“显示项目”按钮以显示Angular标记定义八个列。...要返回FlexGrid表格控件设置,请单击“属性”窗格“后退”按钮。 如果对设计器中所做更改感到满意,请单击WijmoJS 徽标下方“保存”按钮以更新原始源文件编辑器并将其重点关注。...请注意,修改Angular标记会突出显示,设计器中所做更改现在会反映在标记。此时,您可以保存或放弃更改,就像您自己键入更改一样。

5.3K40

Jump Start Bootstrap 第4章

上一章,导航栏只包含一个简单链接列表。本节,我们将使用一些BootstrapJavaScript插件帮助扩展我们网站现有组件功能。...现在,我们有了一个简单下拉菜单,单击链接时显示菜单。我们可以浏览器查看它,如图所示。 ? 让我们结合使用下拉式插件和我们在前一章创建标签和按钮菜单。...nav-tabs组件每个链接都应该有一个data-toggle=”tab”属性。这允许引导程序将单击事件映射到相应选项卡窗格。这些链接href属性应该包含相应选项卡窗格id。...不久,我们将看到如何通过modal-dialog添加一些额外类来更改模式大小。模式对话框,我们将创建一个包裹体元素,它封装了一个模式对话框各个子部分。...添加data-dismiss使按钮单击时关闭模式对话框。 对于本体,我们需要一个包含类modal-body元素。您可以将几乎任何内容放到该元素

28.3K40

AngularDart4.0 英雄之旅-教程-08HTTP 顶

现在是时候添加创建和删除英雄能力了。 更新英雄细节 尝试英雄详情视图中编辑英雄名字。 当你输入时,英雄名字视图标题中被更新。 但是,如果您单击后退按钮更改将丢失。 更新之前没有丢失。...添加保存英雄详情能力 英雄细节模板末尾,添加一个保存按钮,其中包含一个点击事件绑定,调用一个名为save()组件方法。...刷新浏览器,更改英雄名称,保存更改,然后单击浏览器“后退”按钮。 现在应该继续进行更改。 添加加入英雄能力 要添加英雄,应用程序需要英雄名字。 您可以使用与添加按钮配对输入元素。...添加删除英雄能力 英雄视图中每个英雄都应该有一个删除按钮。 将以下按钮元素添加到英雄组件HTML,位于重复元素英雄名称之后。...delete()方法之外,删除按钮单击处理程序代码会停止单击事件传播 - 您不希望触发 click处理程序,因为这样做会选择用户将要删除英雄 。

11K30

用vue实现模态框组件

基本上每个项目都需要用到模态框组件,由于最近项目中,alert组件和confirm是两套完全不一样设计,所以我将他们分成了两个组件,本文主要讨论是confirm组件实现。...}, }, 模态框内部定义了三个方法,最核心部分confirm方法,这是一个定义模态框内部,但是是给使用模态框组件调用方法,该方法返回是一个promise对象,并将resolve...和reject存放于modal组件data,点击取消按钮时,断定为reject状态,并将模态框关闭掉,点确定按钮时,断定为resolve状态,模态框没有关闭,由调用modal组件组件回调处理完成后手动控制关闭模态框...这样一个模态框组件就完成了。 其他实现方法 模态框组件,比较难实现应该是点击确定和取消按钮时,回调处理,我在做这个组件时,也参考了一些其实实现方案。...$dispatch('transmit',this.events.submit); } 组件调用模态框如下: this.

3.5K00

微信小程序开发实战(16):交互组件

使用ActionSheet会从当前窗口底部往上弹出一个窗口,可以该窗口放置任何组件,例如,如图1所示一排按钮。 ?...小程序中使用ActionSheet要使用标签,该标签可以包含任意组件,因此,可以ActionSheet上放置任何小程序支持UI元素。...循环外面使用标签添加了一个“取消”按钮,点击“取消”按钮,无需加任何JavaScript代码就会关闭ActionSheet。...图2 点击“取消”按钮输出日志信息 标签可以放置任何组件,例如,下面的布局代码除了前面的5个按钮外,还放置了一个标签。...图3 带图像ActionSheet 2 对话框 小程序,对话框需要使用标签。与Android、iOS不同是,这些对话框需要实现摆放在布局文件,默认是隐藏状态。

87920

React组件库封装初探--Modal

层) warp层布局大小考虑 全屏:如果warp层实现全屏,由于和mask层为兄弟组件,导致warp层位于mask层之上,后面对mask层单击可关闭功能易出现单击不到,因为被全屏warp层遮挡(可考虑使用事件委托...,将单击事件绑定至第一个组件,通过判断去除modal单击,虽然单击还是warp层); 大小跟随modal层:及设置warp层大小刚好为其内容modal,这样就不会覆盖全部mask层,但是,后期对传入设置是否显示...method()是Modal方法即先给组件Modal增加对应方法,返回一个对象; 通过method(props)方法中将其方法参数作为组件Modalprops传入,并render(Modal)...()调用形式可使用配置props与配置项和默认值有所不同; 如Modal.confirm({})不可配置footer;Modal.info({})footer底部默认应该为一个...其他优化 显隐动画过渡; 组件保留,这里只实现了关闭即摧毁;优化为可选择不摧毁只是隐藏; 支持异步加载关闭 “积跬步、行千里”—— 持续更新~,喜欢的话留下个赞和关注哦!

5K10

Web 技术:CSS最小和最大(宽度高度)知识点及优缺点

以前情况下,按钮上带有单词“تم”,表示完成。 按钮宽度太小,因此在后面的案例,我增加了它最小宽度。 ?...但是,这还不够,标签名称应被截断。 事例地址:https://codepen.io/shadeed/pe... 按钮 对于按钮最小值和最大值有不同用例,因为按钮组件有多种变体。考虑下面的图: ?...用红色表示文本应该在文本裁剪。因为面板主体是一个flex项目,所以它min-height与它内容相等。为了防止这种情况,我们应该重新设置最小高度值。看看HTML和CSS是怎么样。...在这种情况下,max-height可能是一个很好解决方案。 请考虑以下示例: ? 单击菜单按钮,菜单应随动画从上到下滑动。...modal是一个元素,因此它已经具有其父元素100%宽度,对吗? 考虑下面为模态设计简化测试案例。 请注意,如果可用视口空间不足,则宽度如何更改为其父级100%。 ?

5.4K20

ExtJs二(实现登录)

开始动手  1.解决方案资源管理器中选择Scripts\ExtJS\ux目录,单击右键选择添加,新建项,弹出窗口中选择Jscript文件,并将名称修改为login.js(以后项目的可直接将该文件复制到该目录...这里要注意,文件名不能用类全名做文件名,因为动态加载会根据类名自动找到目录并加载文件,类名中最后一个小数点名称就是文件名,例如,登录窗口类全称为Ext.ux.Login,而login就是文件名。...如果想要在脚本中使用ExtJS提示信息,可将书附带资源包Ext.js文件复制到ExtJS目录,复制解决方案资源管理器将Ext.js拖到到login.js文件,就会生成以下代码:  //...注意create方法对象名称,笔者并没有使用字符串,这样就可以直接使用对象,而不需要再去转换表找对象,可以提高速度。...登录按钮预设为禁用。formBind配置作用是只有表单内输入符合要求时才能使用该按钮,这个设计Ext JS4也是新加入,很方便,不再需要自己去写代码实现这个了。

1.8K20

你需要了解前端测试“金字塔”

该应用是一个简单 modal 应用。 点击一个按钮打开一个 modal ,点击 modal OK 按钮关闭 modal。 我们将从基于组件框架构建应用。...在前端测试金字塔,大部分测试都是单元测试。 单元测试 单元测试测试是代码库单元。 它们直接调用函数或单元,并确保返回正确结果。 我们应用,我们组件是单元。...,Modal 调用 toggleModal 单击删除按钮时,Modal 会调用 toggleModal 当 button 被点击时,button 调用 toggleModal 我们测试将浅渲染组件,然后检查每一项规格工作...在下面的测试,有人从中删除了 modal-card-foot 类。 快照测试是一种检查组件样式或标记方法。 如果快照测试通过,我们知道代码更改不会影响组件显示。...它们执行与我们手动测试应用程序时相同操作。 我们应用程序,我们有一个用户(操作)旅程。当用户点击按钮时,模式将打开,当他们点击模式按钮时,模式将关闭。

1.6K80
领券