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 ...
随机推荐
- Android Butterknife(黄油刀) 使用方法总结
前言: ButterKnife是一个专注于Android系统的View注入框架,以前总是要写很多findViewById来找到View对象,有了ButterKnife可以很轻松的省去这些步骤.是大神J ...
- Enetity Framework 加载关联数据后,循环问题
通过ef查询关联数据后,出现无限循环情况,在实体中将属性加上[Newtonsoft.Json.JsonIgnore] . [IgnoreDataMember] 就ok了. 我是查询后,用json转换 ...
- 转载 筛子算法之golang实现求素数解析
package main import "fmt" // Send the sequence 2, 3, 4, ... to channel 'ch'. func generate ...
- 开源的图片查看库之PhotoView
PhotoView是一个开源的图片查看库,可以实现图片的浏览,手势放大缩小等操作,以及支持在ViewPager中翻页浏览图片等功能.PhotoView使用简单,还可以对缩放模式进行设置, 其开源地址为 ...
- 微服务简介和SOA比较
https://blog.csdn.net/chszs/article/details/78515231https://blog.csdn.net/wuxiaobingandbob/article/d ...
- Python 导入文件问题
1.同级目录下调用 若在程序 testone.py 中导入模块 testtwo.py , 则直接使用 [import testtwo 或 from testtwo import *] 2.调用子目录 ...
- 用Tcpdump抓包
在安卓手机上抓包 1.将手机root并连上,记得开启开发者选项,并选择传输文件 2.将tcpdump程序拷到手机里面,可以直接在电脑上操作,也可以用adb 3.使用adb操作手机内核,安卓内核基于li ...
- H5中调起微信这么实现,如果未安装则提示未安装
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- app测试自动化之混合APP(之前的三篇为原生APP的操作)
混合开发的App中,经常会有内嵌的H5页面:定位方法与原生APP不同,需要上下文切换 #获取所有上下文contexts=dr.contextsprint(contexts)#打印当前上下文(有点问题应 ...
- 山东省第十届ACM省赛参赛后的学期总结
5.11,5.12两天的济南之旅结束了,我也参加了人生中第一次正式的acm比赛,虽然是以友情队的身份,但是我依旧十分兴奋. 其实一直想写博客来增加自己的能力的,但是一直拖到现在,正赶上老师要求写一份总 ...