Angular获取dom元素,以及父子组建之间相互传值
1.使用原生js代码获取dom元素
在ts文件中有一个ngOnInit()的方法,这个方式是指在模块加载完毕之后并不是dom加载完毕,也就是说如果你的dom元素中使用的angular的指令,然后想在这个方法中修改dom元素是不可能的,
但是有另一个方法ngAfterViewInit()的方法,是表示dom加载完毕之后执行的方法,所以获取dom元素的动作可以放在这里面
2.使用@ViewChild获取dom元素
- 1.在父组件中使用引入ViewChild
- 2.使用装饰符来获取父组件中使用的子组件的dom元素
3.在ngAfterViewInit()方法中修改dom元素的属性。
二:父子组建之间相互传值
1.父组件调用子组件的时候传入数据
2.子组件引入Inupt模块
3.子组件中@Input接收父组件传过来的数据
三:output实现父子组件的通信(子组件主动推送)
1.子组件引入Output和EventEmitter
2.子组件实例化EventEmitter
3.用一个方法发射
4.再父组件中对子组件进行接受
5.父组件响应方法
这里的e就是在子组件中广播的那句话。
Angular获取dom元素,以及父子组建之间相互传值的更多相关文章
- vue父子组件之间相互传值
1. 子组件使用父组件方法,并向父组件传值 子组件代码 <template> <div class="menu"> <div class=" ...
- vue项目中的父子组件之间的传值。
首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...
- angular学习笔记-angular中怎么获取dom元素
步骤分解: 第一步:给要获取的元素一个ng-model变量,并且绑定事件啦! <div class="home" ng-model="dirName" n ...
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
- 获取DOM元素位置和尺寸大小
JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- vue 组件传递值以及获取DOM元素的位置信息
1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...
- 通过class和id获取DOM元素的区别
1.通过id获取DOM元素的方法:document.getElementById("id名") 2.通过class获取DOM元素的方法:document.getElementsBy ...
- vue获取dom元素内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
随机推荐
- ajax 415
ajax 发送post请求是出现415错误,是ajax的格式有问题,如下. $.ajax({ type: 'POST', url: '/login', data: { "username&q ...
- Json+Ajax相关
Ajax前戏之json: 1.什么是json? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. 2.json对象和JavaScript ...
- Linux安全加固之中间件Tomcat
(注:皆为参考操作配置) 这次是tomcat的Linux加固,分为身份鉴别.访问控制.安全审计.资源控制和入侵防范5个方面大部分加固基于xml配置文件进行修改,也应根据实际需求制定方案.寻找配置文件目 ...
- JMeter使用plugins插件进行服务器性能监控
JMeter使用plugins插件进行服务器性能监控 性能测试时,我们的关注点有两部分 1 服务本身:并发响应时间 QPS 2 服务器的资源使用情况:cpu memory I/O disk等 JMet ...
- OO ALV 后台运行时错误:Control Framework: Fatal error - GUI cannot be reached
这个错误的原因,是GUI容器依赖GUI的存在,因为它是在后台运行,没有GUI,因此控制错误. 可以通过做一些编码绕过这个. * ALV Grid DATA: R_GRID TYPE REF TO CL ...
- 使用Nginx压缩文件、设置反向代理缓存提高响应速度
Gzip压缩: 最开始,这个竟然要6m多(大到不寻常),响应的速度3分多钟. 所以先对返回的文件进行gzip压缩.判断返回的资源是否有使用gzip压缩,观察响应头部里面,如果没有 Content-En ...
- Matlab中psf2otf()函数在opencv中的实现
在Matlab中有个psf2otf()函数,可以将小尺寸的点扩散函数,扩大尺寸,并作二维傅里叶变换,opencv中没有这个函数,所以编了这么个函数: /************************ ...
- caoz的梦呓:所谓打破信息不对称,其实是一种幻觉
猫宁!!! 参考链接:https://mp.weixin.qq.com/s/UzSyrhe0Vck7ItN-XU6JEg 很多创业者说,要建立怎样一个平台,要打破信息不对称,大部分时候,我都会泼冷水, ...
- 【AMAD】python-goose -- HTML Content/Article 提取器
动机 简介 用法 个人评分 动机 新闻网页,结构大多是类似的. 所以,能不能用一种通用的爬取方法来提取其中的数据? 简介 Goose最初是一个Java项目,在2011年被转为了scala项目1. Py ...
- 【AMAD】itsdangerous -- 用安全的方式把可信赖的数据传入不可信赖的环境,或者相反
动机 简介 内部原理 个人评分 动机 有时,你不得不把数据发送给一些不信赖的环境. 但是怎么安全地做这件事呢?答案就是使用签名. 简介 使用签名,首先设定一个只有你知道的key,你可以使用它来为你的数 ...