Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何获得已以角形式传递给我的canDeactivate保护的泛型组件属性?

如何获得已以角形式传递给我的canDeactivate保护的泛型组件属性?
EN

Stack Overflow用户
提问于 2020-11-21 21:26:21
回答 1查看 135关注 0票数 0

我想将多个组件(Component1 \ Component2)传递到我的canDeactivate保护程序中,所以我使用如下所示的泛型。

Problem --我想从传入的每个组件中访问一个属性,那么如何获得泛型组件属性?

我一定要演吗?我可以在调试器中看到组件在那里,但在函数活动之前,我无法访问这些属性。

FYI - component.profileForm.dirty不工作,因为它不知道T是什么,直到我在函数中

代码语言:javascript
运行
AI代码解释
复制
export class PreventUnsavedChangesGuard <T> implements CanDeactivate <T> {

  constructor(private confirmService: ConfirmService) {}

  canDeactivate(component: T): Observable < boolean > | boolean {
    if (component.hasOwnProperty('profileForm')) {
      if (component.profileForm.dirty) {
        return this.confirmService.confirm();
      }
    }
    return true;
  }

}

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-11-22 00:01:45

您可以定义一个包含您期望组件具有的最小信息的接口,例如,

代码语言:javascript
运行
AI代码解释
复制
interface HasProfileForm {
    profileForm: Form
}

然后你可以修改你的护卫以使用新的界面,例如,

代码语言:javascript
运行
AI代码解释
复制
export class PreventUnsavedChangesGuard <T extends HasProfileForm> implements CanDeactivate <T> {

  constructor(private confirmService: ConfirmService) {}

  canDeactivate(component: T): Observable<boolean> | boolean {
    if (component.hasOwnProperty('profileForm')) {
      if (component.profileForm.dirty) {
        return this.confirmService.confirm();
      }
    }
    return true;
  }
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64950934

复制
相关文章
Vue的 侦听器 watch
watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,
wust小吴
2019/12/27
6670
程序化的事件侦听器
也就是说,在其中一个页面中我们使用uni.on或者uni.once,在另一个页面中就可以使用uni.emit进行调用,前提是uni,on或者uni.
阿超
2022/08/17
1.4K0
程序化的事件侦听器
Vue2 侦听器 watch【初识】
1. 侦听器 watch ---- Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性 当属性发生改变时,自动触发属性对应的侦听器。 当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。 2. 基础用法 ---- 当 msg 属性的值发生改变时,就会触发侦听器的执行 <div id="app"> <input type="text" v-model="msg"> </div> <script> let vm = new Vue({ el: '#app', d
很酷的站长
2023/02/17
5580
Vue2 侦听器 watch【初识】
Vue计算属性和侦听器
模板内的表达式非常便利,但放入太多的逻辑会让模板过重且难以维护,所以,对于复杂的逻辑,可以使用计算属性 computed。
Leophen
2019/08/23
6920
jQuery事件
1. 常用事件 click() 鼠标单击 blur() 元素失去焦点 focus() 元素获得焦点 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发) ready() DOM加载完成 示例代码: <script> $(function(){ var $li = $('.list li'); var $button = $('#button1') var $text = $("#text1");
落雨
2022/03/01
32K0
jquery事件
parent > child在给定的父元素下匹配所有的子元素 参数 parentSelectorV1.0 任何有效选择器 childSelectorV1.0 用以匹配元素的选择器,并且它是第一个选择器的子元素 示例 描述: 匹配表单中所有的子级input元素。 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input nam
wangxl
2018/03/07
2K0
JQuery事件
       focus()                 ------获得焦点事件
用户3159471
2018/09/13
2.3K0
jQuery 事件
什么是事件 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 常见 DOM 事件: 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypr
静默虚空
2018/01/05
3K0
jQuery 事件
在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。
陈不成i
2021/07/22
2.4K0
九.Vue.js的侦听器
九.Vue.js的侦听器
Java架构师必看
2021/05/14
5590
jQuery 事件注册、事件处理
其他事件和原生基本一致。 比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
梨涡浅笑
2020/10/27
4K0
jquery鼠标事件
click()   为点击事件绑定一个事件处理函数,或者触发元素点击事件。   .click( handler(eventObject) )     handler(eventObject)       每次事件触发时候执行的函数。   .click([eventData],handler(eventObject))     eventData       一个对象,它包含的数据键值对应映射将被传递给事件处理程序。   handler(e
用户1197315
2018/01/19
4.9K0
Jquery 事件冒泡
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。 (摘自网络) 如何来阻止Jquery事件冒泡? 通过一个小例子来解释 <%@ Page Language="C#" AutoEventW
Porschev
2018/01/16
3K0
jQuery事件(20171031)
1.交换内容 $("#btn").on("click",function(){ //方法一 var srcOne = $("img").eq(0).attr("src"); var srcTwo = $("img").eq(1).attr("src"); $("img").eq(0).attr("src",srcTwo); $("img").eq(1).attr("src",
天天_哥
2018/09/29
1.2K0
jQuery事件委托
在jQuery中,事件委托是一种优化事件处理的技术,它利用事件冒泡的机制,将事件处理程序绑定到一个父级元素上,从而减少事件处理函数的数量,并实现对动态添加的子元素的事件处理。
堕落飞鸟
2023/05/18
1.2K0
jquery事件绑定
.bind()   为一个元素绑定一个元素处理程序。   .bind(eventType[,eventData],handler(eventObject))     eventType       一个包含一个或多个DOM事件类型的字符串,或自定义事件的名称。     eventData       一个对象,它包含的数据键值对映射将被传递给事件处理程序。     handler(eventObject)       每当事件
用户1197315
2018/01/19
3.8K0
jquery基础事件
一.常用的事件有:click、dblclick、 mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、 keypress、keyup、blur、focus、load、resize、scroll、error。。。。。
wfaceboss
2019/04/08
1.3K0
jQuery事件机制
JavaScript中已经学习过了事件,但是jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件的处理能力。
Qwe7
2022/04/16
1.9K0
jQuery事件代理
事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上,通过判断事件来源,执行相应的子元素的操作,事件代理首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。
落雨
2022/03/01
30K0
jQuery事件处理
在jQuery中,事件处理是一项重要的功能,它使我们能够对元素的各种交互行为做出响应。jQuery提供了一系列方法来绑定、解绑和触发事件,以及操作事件对象。
堕落飞鸟
2023/05/18
9190

相似问题

jQuery会覆盖事件侦听器吗?

30

如何覆盖(?)jQuery事件?

10

Fosuserbundle覆盖事件侦听器

14

Vue无法附加事件侦听器

13

Jquery事件覆盖

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档