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

当我在模式中添加旋转木马时,关闭按钮在angular 6中不起作用

在Angular 6中,当您在模态框中添加旋转木马时,关闭按钮不起作用的原因可能是由于事件绑定或代码逻辑的问题。以下是一些可能的解决方案和建议:

  1. 确保关闭按钮正确绑定了点击事件。在Angular中,可以使用(click)指令来绑定点击事件。例如,您可以将关闭按钮的HTML代码修改为:
代码语言:txt
复制
<button (click)="closeModal()">关闭</button>

在上面的代码中,closeModal()是一个在组件中定义的关闭模态框的方法。

  1. 在组件中实现关闭模态框的逻辑。在组件的代码中,确保closeModal()方法正确地关闭模态框。您可以使用Angular Material中的MatDialogRef来关闭模态框。以下是一个示例:
代码语言:txt
复制
import { Component, Inject } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent {

  constructor(public dialogRef: MatDialogRef<ModalComponent>) { }

  closeModal(): void {
    this.dialogRef.close();
  }

}

在上面的代码中,closeModal()方法通过调用dialogRef.close()来关闭模态框。

  1. 确保旋转木马不会阻止关闭按钮的点击事件传播。如果旋转木马组件具有自己的点击事件处理逻辑,可能会阻止关闭按钮的点击事件传播。您可以尝试在关闭按钮上添加$event.stopPropagation()来阻止事件传播。例如:
代码语言:txt
复制
<button (click)="closeModal(); $event.stopPropagation()">关闭</button>

在上面的代码中,$event.stopPropagation()会阻止点击事件继续传播到旋转木马组件。

  1. 检查旋转木马组件的代码逻辑。如果以上解决方案都没有解决问题,您可能需要检查旋转木马组件的代码逻辑,确保它不会干扰关闭按钮的功能。

总结: 以上是解决在Angular 6中关闭按钮不起作用的一些常见解决方案和建议。请根据您的具体情况逐一尝试这些解决方案,并根据需要进行调整。如果问题仍然存在,您可能需要进一步检查和调试代码以找到问题的根本原因。

相关搜索:播放和暂停按钮在旋转木马中不起作用?在Angular 10中旋转木马不起作用:图像不能滑动关闭模式按钮在引导中不起作用JQUERYUI:模式按钮在我关闭和打开时不起作用在旋转木马中多次按下向前按钮时,对齐方式不同当我在模式中的任意位置单击时,如何阻止模式关闭是否弹出关闭按钮在angular6中不起作用?在angular中单击后退按钮时,导航不起作用在关闭模式ViewController时,会移动以编程方式向UITabBar添加按钮在Angularjs中单击模式弹出关闭按钮(x)时重置表单在联合图库中,如何在单击模式框关闭按钮时停止视频当我单击搜索按钮时,Angular Material Datepicker在Angular 9中显示落后一天当我们在Angular中动态添加列时,如何在组件中添加鼠标悬停?当我添加一个旋转木马时,我在Bootstrap 4中的卡片被弄乱了。我的推荐信代码是ShareThis按钮在移动设备上不起作用,当我点击它时,没有模式窗口或弹出窗口当我点击切换按钮时,关闭并重新打开模式的额外点击事件触发器(在重新打开的模式下)使用SwiftUI,我们在列表中安装了一个按钮。为什么当我点击按钮以显示模式,然后再次关闭它时,模式会消失?在angular 5中按下浏览器的后退按钮时,我的模式弹出窗口不会关闭当我在浏览器中输入url时,Angular 6路由不起作用当我在add函数中添加提交函数时,为什么this程序不起作用?
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

实战 | Change Detection And Batch Update

WEB开发,当与用户或服务器发生交互,需要我们手动获取数据并更新DOM,这个过程是繁琐的、易错的。...当我们连续更新数据,这些框架/库如何避免连续更新DOM,而是进行批量更新? 带着这两个问题,我将简要分析一下React、Angular1、Angular2及Vue的实现机制。...新手常碰到的一个问题就是为啥下面的代码不起作用。...如果调用改成这样: 通过添加一层wrapper函数,不就可以保证foo执行完调用baz了么。...config.async 我们可以通过将Vue.config.async设置为false,关闭异步更新机制,让它变成同步更新,看下面的例子: 打开控制台你会发现打印了1 2,但是最好别这么干 如果关闭了异步模式

3.2K20

Change Detection And Batch Update

本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 前言 传统的WEB开发,当与用户或服务器发生交互,需要我们手动获取数据并更新DOM,这个过程是繁琐的、易错的。...当我们连续更新数据,这些框架/库如何避免连续更新DOM,而是进行批量更新? 带着这两个问题,我将简要分析一下React、Angular1、Angular2及Vue的实现机制。...$apply(); }); 小结 Angular1我们是直接操作数据的,这个过程Angular1是感知不到的,只能在某个点调用$apply进行脏值检测,所以默认就是批量更新。...如果调用改成这样 function foo() { bar(); } setTimeout(function() { foo(); baz(); }); 通过添加一层wrapper函数,不就可以保证...$el.textContent); }); 打开控制台你会发现打印了1 2,但是最好别这么干 如果关闭了异步模式,Vue 检测到数据变化时同步更新 DOM。

3.3K40
  • Change Detection And Batch Update

    本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 前言 传统的WEB开发,当与用户或服务器发生交互,需要我们手动获取数据并更新DOM,这个过程是繁琐的、易错的。...当我们连续更新数据,这些框架/库如何避免连续更新DOM,而是进行批量更新? 带着这两个问题,我将简要分析一下React、Angular1、Angular2及Vue的实现机制。...$apply(); }); 小结 Angular1我们是直接操作数据的,这个过程Angular1是感知不到的,只能在某个点调用$apply进行脏值检测,所以默认就是批量更新。...如果调用改成这样 function foo() { bar(); } setTimeout(function() { foo(); baz(); }); 通过添加一层wrapper函数,不就可以保证...$el.textContent); }); 打开控制台你会发现打印了1 2,但是最好别这么干 如果关闭了异步模式,Vue 检测到数据变化时同步更新 DOM。

    3.7K70

    使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

    这就是Ionic 2 的依赖注入工作模式,基本上是一种方式告诉应用程序“我们希望通过navCtrl引用到NavController”。通过添加公共关键字它面前,它会自动创建一个成员变量。...现在我们已经建立了一些假的数据(我们使用ionViewDidLoad生命周期钩子,这将在页面加载被触发),您应该能够看到它已经列表渲染了: ?...这次我们定义了另一个按钮,简单地调用了定义add-item-page.ts的saveItem函数。...我们还有另一个按钮指向一个close方法——因为这个页面作为一个Mode模式的页面,我们希望能把页面关闭,所以我们也会在add-item-page.ts定义这个方法。...同样注意到我们的保存按钮上使用了full属性,这个方便的小属性帮助我们设置按钮宽度为full。 2.5 建立添加项的类 现在我们将要建立一个类给我们的添加项组件。

    6.1K50

    Angularsweetalert弹框的使用详解

    所以我就想办法将sweetalert用到项目中,项目中引入sweetalert,遇到诸多问题,但最终我不懈坚持下,都解决了,实现了效果。具体用法请看下文。...一、下载文件 npm install angular-sweetalert npm install sweetalert 当npm 下载angular-sweetalert,会附带下载sweetalert.../sweetalert.min.js 注意:app添加依赖模块‘oitozero.ngSweetAlert’ 四、使用方法 1、基础用法 swal("请选中数据再进行操作"); ?...五、相关问题 1、传函数错误 Swal(“确定提交吗”,  function(){}, ‘error’ );  //这种写法我用的这个版本是错误的,我的这个版本支持then(), 不支持直接在参数写方法...2、API问题 在这个版本以下写法只能实现title和text的效果,其他属性都不起作用 1 swal({ 2 title: "确定删除吗?"

    2.8K40

    Jump Start Bootstrap 第4章

    在这代码,我使用类btn、btn-lg、btn-default创建了一个大的灰色按钮,它正好处于inactive状态,当我们点击它,Bootstrap将在按钮添加类active。...不久,我们将看到如何通过modal-dialog添加一些额外的类来更改模式的大小。模式对话框,我们将创建一个包裹体元素,它封装了一个模式对话框的各个子部分。...这里的关闭按钮图标是一个乘法(x)符号。这个按钮应该有一个close类,这样它就可以对齐到模式对话框的左上角。添加data-dismiss使按钮单击关闭模式对话框。...当设置为“静态”,当在模态主体外的任何地方点击模式对话框不会关闭。 keyboard属性用于启用或禁用键盘的escape键功能,当设置为false,Esc键不会关闭模式对话框。...Bootstrap模式对话框有一个选项,当单击该句柄,将该链接加载到它的modal-body元素。这个特性默认情况下是关闭的。

    28.3K40

    Cinemachine(一)VirtualCamera和Brain的简单介绍「建议收藏」

    我们可以将这个标签加在我们的自定义组件,来实现运行时保存修改。此外若我们组件中有些属性不想保存修改的值,可以属性前面添加 [NoSaveDuringPlay] 来过滤。...注:使用Timeline处理VirtualCamera,该属性不起作用 Follow 跟随目标,即VirtualCamera会跟着设置的目标移动而移动。...Lock To Target With World Up 与Lock To Target不同的是,该模式下会忽略模型的x和z的转动,只有y轴转动,Camera才会跟着旋转 Lock To Target...No Roll 与Lock To Target不同的是,该模式下会忽略模型的z的转动,当x或y轴转动,Camera会跟着旋转 Lock To Target On Assign 测试感觉和Lock...如果我们Body选择的是Hard Lock to Target,那么就可以通过Follow的目标来控制Camera的路径和旋转 同样的,我们先来看看最常见的Composer模式下的各项设置的含义: Tracked

    6.4K23

    一篇上手LayaAir的3D物理引擎

    3.3.7 绕XYZ轴旋转的角运动约束模式angular (X\Y\Z)Motion UnityAngular X Motion, Angular Y Motion, Angular Z Motion...对应LayaAir的 angularXMotion, angularYMotion, angularZMotion, angular (X\Y\Z)Motion是表示绕X、Y 、Z 轴旋转的角运动约束模式...3.3.10 弹簧角运动限制(angularLimitSpring、angularDamp) Unity,弹簧的角运动旋转限制分为X轴旋转限制Angular X Limit Spring以及Y轴和Z...3.3.11 角运动限制(minAngularLimit、maxAngularLimit、angularBounce) Unity,关于角运动旋转的限制有X轴旋转的下限Low Angular X Limit...反弹力Boundciness 其中的反弹力 Bounciness 是当对象的旋转达到限制角度在对象上施加的反弹力矩。LayaAir引擎对应角度反弹力矩angularBounce。

    4.7K10

    《译 SFML Essentials 英文版》—— 《第一章》 SFML 入门

    还允许手动调整窗口的大小 sf::Style ::Close 添加一个关闭按钮 sf::Style ::Fullscreen 这将以全屏的形式打开窗口。...然而,仍然有一个问题——关闭按钮不起作用。SFML没有假设在用户点击关闭按钮后窗口应该关闭。也许我们想保存玩家的进度,或者先问问他们是否确定。这意味着我们必须自己实现关闭按钮功能。...-- Enum value Member associated Description Event::Closed None 当操作系统检测到用户想要关闭窗口触发此事件——关闭按钮、组合键等等。...当我们要求用户应用程序继续运行之前执行某些操作,或者如果我们想在另一个线程上处理输入时,这是非常有用的. 在后一种情况下,只有该线程被阻止,允许游戏循环继续运行。...每一帧,我们将正方形旋转1.5度并向右移动1个像素。

    3K30

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

    添加路由 应该在用户点击按钮后显示英雄而不是自动显示。 换句话说,用户应该能够导航到英雄列表。 更新pubspec 使用Angular路由(angular_router)启用导航。...由于路由器自己的包,首先将该包添加到应用的pubspec: ? 并非所有的应用程序都需要路由,这就是为什么Angular路由器处于独立的可选软件包的原因。...Angular注入HeroService,您可以DashboardComponent中使用它。 获取英雄 dashboard_component.dart添加以下导入语句。...仪表板或英雄列表中选择英雄不起作用。 你会接下来的处理。 选择一个仪表板英雄 当用户选择仪表板的英雄,应用程序应该导航到HeroDetailComponent以允许用户查看和编辑选择的英雄。...查看详细信息按钮不起作用。 更新HeroesComponent类 响应按钮单击,HeroesComponent导航到HeroesDetailComponent。

    17.6K30

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

    我们的示例,操作是单独的选项卡打开设计图面,并使用 Angular标记提供的上下文,以及源文件该标记的位置。 现在单击链接以相邻选项卡打开设计器。...对于具有集合的控件(例如网格列),设计器允许您添加,删除和修改单个成员。 “属性”窗格中找到columns属性,然后单击属性编辑器右侧的“显示项目”按钮以显示Angular标记定义的八个列。...例如,您可以通过添加适当类型的新系列元素,轻松地将趋势线添加到图表“属性”窗格向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。...随着趋势线添加到图表,设计界面现在看起来像这样: 独立模式下,没有要更新的源文件,但您仍然可以生成Angular标记并将它们从设计器复制到HTML源。...但是,当扩展更新源文件,将保留原始控件标记定义的任何现有事件处理程序。 设计器的独立命令会记住当前工作空间上下文中可视化设计界面的状态,即使您关闭并重新打开VS代码也是如此。

    5.4K40

    室外温度已达34度,本博客提供自助风扇服务

    ,我们先将他们定位在一起,再通过旋转将他们分开,形成一个环绕圆心的效果 ?...旋转效果 实现旋转效果的方法有很多,js定时器,css3等都可以实现,这里采用css3的动画来实现。...控制转速 通过点击不同的按钮,实现转速的改变,也就是动画时间的改变,默认风扇是关闭的,当我们点击1到3档,我们给leafs添加动画时间,也就是档数越大动画时间越短 switch (index) {...关闭缓慢停止 你可能会发现在上面的代码,会有一个类名的出现out,这个就是我用来实现缓慢停止的核心了,点击关闭,重新给扇叶leafs添加一个结束动画 .out { animation:...important; } 这样在用户点击关闭按钮,会先将原本的动画时间设置为0,再添加新的动画,这个动画是一个ease-out效果,速度会减慢从而实现了缓慢停止的功能 实现效果一般,转速过快,速度还是会有突变的效果

    30620

    开机黑屏或空白屏幕?

    如果处于平板模式,请在 2 秒内同时按下提高音量按钮和降低音量按钮三次。 如果 Windows 响应,则 Windows 尝试刷新屏幕,你将听到很短的蜂鸣音,并且屏幕将会闪烁或变暗。...如果你无法登录,请选择屏幕右下角的“电源” 按钮以重启设备。 如果你屏幕上没有看到“电源” 按钮,请长按设备上的电源按钮 10 秒钟以将设备关闭。然后,按下并松开电源按钮以将设备重新打开。...但是,如果设备处于干净启动环境未出现问题,则可以按秩序打开或关闭启动应用程序或服务,然后重启设备,来确定启动应用程序或服务是否会导致该问题。...如果设备处于干净启动环境未发生问题,则可以按秩序打开或关闭启动应用程序或服务,然后重启设备,来确定启动应用程序或服务是否会导致该问题。...完成疑难解答后,请转到此页面的“重置计算机以正常启动”部分。 我的设备重启后出现显示旋转点的黑屏或彩色屏幕 如果重启设备后出现黑屏或彩色屏幕伴随围绕小圆圈旋转的点,这一般表示更新即将完成。

    7.3K21

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

    现在是时候添加创建和删除英雄的能力了。 更新英雄的细节 尝试英雄详情视图中编辑英雄的名字。 当你输入时,英雄的名字视图标题中被更新。 但是,如果您单击后退按钮,更改将丢失。 更新之前没有丢失。...添加保存英雄详情的能力 英雄细节模板的末尾,添加一个保存按钮,其中包含一个点击事件绑定,调用一个名为save()的新组件方法。...添加删除英雄的能力 英雄视图中的每个英雄都应该有一个删除按钮。 将以下按钮元素添加到英雄组件HTML,位于重复的元素的英雄名称之后。...添加按名称搜索的功能 你要添加一个英雄搜索功能的英雄之旅。 当用户搜索框输入一个名字,你会对这个名字过滤的英雄进行重复的HTTP请求。...示例,基础的字符串流(_searchTerms.stream)表示由用户输入的英雄名称搜索模式。 每次调用search()都会通过调用控制器上的add()将新的字符串放入流

    11K30

    苹果iPhone白屏死机?如何修复?

    对于iPhone 7和7 Plus:同时按下电源按钮和音量降低按钮,当你屏幕上看到苹果标志松开按钮。 对于iPhone 8及更新机型:快速按下并松开音量增大按钮,然后快速按下并松开音量减小按钮。...强制重启iPhone.jpg 方法三、使用主页 + 音量增大 + 电源键 如果硬强制重启不起作用,那么还有另一种按钮组合可以帮助修复iPhone白屏死机问题: 同时按住主页按钮、音量增大按钮和电源...请一直按住直到屏幕关闭。 继续按住这些按钮,直到出现苹果标志。 当苹果标志出现时,您可以松开按钮,让iPhone像往常一样启动。 显然,这种方法仅适用带主页按钮的 iPhone 机型。...方法四、尝试恢复模式并从备份恢复 如果以上方法都不起作用,您可以尝试将iPhone置于恢复模式。恢复模式将让您重新安装 iOS并将备份数据恢复到设备。...iTunes恢复模式.jpg 方法五、使用三方工具修复iPhone 白屏死机问题 如果恢复模式不起作用,建议你试试三方工具,例如丰科iOS系统修复工具。

    5.7K00

    基于 HTML5 WebGL 的 3D 科幻风机

    按钮控制功能: 风机启停: ?   线框模式: ?   机舱视角: ?   发电工艺: ? 整理思路: 场景部分:   这里把 3D 当做背景嵌套在 2D 场景。   ...这样初始化图纸的时候,直接反序列化 2D 图纸即可。 事件部分:   2D 图纸中有很多的按钮,通过它们来控制 3D 的一些动画。   ...利用随机值当做一个索引,然后取到相对应的状态信息,添加到 table 。 如果当前的 status 为 normal,说明是正常信息,否则为异常信息。...所以我把风机旋转的动画添加到了全局对象,方便进行调用。...setRotationMode('zxy') 方法是设置三维旋转模式,顺序是 z -> x -> y,先进行z轴旋转,再进行x轴旋转,最后进行y轴旋转。设置目的是为了避免坐标轴受外部旋转的影响。

    1.3K10

    基于 H5与WebGL 的科幻风机 3D 展示

    按钮控制功能: 风机启停: ?   线框模式: ?   机舱视角: ?   发电工艺: ? 整理思路: 场景部分:   这里把 3D 当做背景嵌套在 2D 场景。   ...这样初始化图纸的时候,直接反序列化 2D 图纸即可。 事件部分:   2D 图纸中有很多的按钮,通过它们来控制 3D 的一些动画。   ...利用随机值当做一个索引,然后取到相对应的状态信息,添加到 table 。 如果当前的 status 为 normal,说明是正常信息,否则为异常信息。...所以我把风机旋转的动画添加到了全局对象,方便进行调用。...setRotationMode('zxy') 方法是设置三维旋转模式,顺序是 z -> x -> y,先进行z轴旋转,再进行x轴旋转,最后进行y轴旋转。设置目的是为了避免坐标轴受外部旋转的影响。

    1K31

    AngularDart4.0 指南- 用户输入 顶

    ; } 当用户点击按钮Angular从ClickMeComponent调用onClickMe()方法。 通过事件对象获取用户输入 DOM事件携带可能对组件有用的信息的有效载荷。...输入框输入内容,然后观看每个按键显示更新。 ? 除非你绑定一个事件,否则这根本不起作用Angular仅在应用程序响应异步事件(如击键)才更新绑定(以及屏幕)。...失去焦点(blur)事件 在前面的示例,如果用户没有首先按下Enter的情况下单击页面上的其他位置,则输入框的当前状态将丢失。 只有当用户按下Enter,组件的value属性才会更新。...现在,把它放在一个微型应用程序,可以显示英雄列表,并添加新的英雄列表。 用户可以通过输入框输入英雄的名字并点击添加添加英雄。 ? 下面是“英雄之旅”组件。...第二个语句newHero.value =''新的英雄添加到列表后清除输入框。 源代码 这里是在这个页面讨论的所有代码。

    3.5K00

    Ng-Matero v15 正式发布

    添加的,同时也增加了 moment-adapter 日期模块。...在外国友人的帮助下,14.6.0 终于加上了时间输入功能,效果如下所示: 在线体验地址 时间输入功能默认是关闭的,需要添加 timeInput 参数启用该特性。...侧边栏导航的焦点管理 侧边栏导航的聚焦功能是 14.3.0 添加的,可能很多人没有注意到这个不显眼的功能(使用 TAB 键即可快速的切换焦点,按 space 或者 enter 键可以展开收起二级菜单...另外,侧边栏菜单按钮使用语义化标签进行了优化,关于按钮的选择可以参考 Angular Material Button 文档的说明: Angular Material 使用原生的 ...说一下自己的感受: 第一次得知 Angular 官方将在 v15 全面迁移 MDC ,内心还是很抵触的,主要是觉得 MDC 的很多效果做的不如 Angular Material 细腻(比如 form-field

    5.5K40
    领券