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元素,以及父子组建之间相互传值的更多相关文章

  1. vue父子组件之间相互传值

    1. 子组件使用父组件方法,并向父组件传值 子组件代码 <template> <div class="menu"> <div class=" ...

  2. vue项目中的父子组件之间的传值。

    首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...

  3. angular学习笔记-angular中怎么获取dom元素

    步骤分解: 第一步:给要获取的元素一个ng-model变量,并且绑定事件啦! <div class="home" ng-model="dirName" n ...

  4. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  5. 获取DOM元素位置和尺寸大小

    JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...

  6. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  7. vue 组件传递值以及获取DOM元素的位置信息

    1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...

  8. 通过class和id获取DOM元素的区别

    1.通过id获取DOM元素的方法:document.getElementById("id名") 2.通过class获取DOM元素的方法:document.getElementsBy ...

  9. vue获取dom元素内容

    通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...

随机推荐

  1. TCP输出 之 tcp_transmit_skb

    概述 tcp_transmit_skb的作用是复制或者拷贝skb,构造skb中的tcp首部,并将调用网络层的发送函数发送skb:在发送前,首先需要克隆或者复制skb,因为在成功发送到网络设备之后,sk ...

  2. Anaconda官网下载太慢/出错,以及Anaconda下载包又慢又出错的总体方法,应该如何快速下载,使用上海科技大学的开源镜像站即可

    1.最新更新:清华源和中科大源都已经挂了,不要再用他们的镜像源了!!!用上海科技大学的镜像!!!! 2.其次,CSDN上大多的快速装包法都在现在(2019.5.11)出现了问题,也不全,本文是亲自实践 ...

  3. excel中如何设置只打印第一页

    在打印表格时,怎样设置只打印第一页呢,操作很简单,下面,小编说下操作方法.   方法/步骤     打开要打印的工作表, 再点击“文件”   弹出的页面中,在左侧这里,点击“打印”   在右边弹出与打 ...

  4. 左键双击关闭pagecontrol中的一个分页即一个tabsheet,功能像遨游浏览器一样

    左键双击关闭pagecontrol中的一个分页即一个tabsheet,功能像遨游浏览器一样 procedure TfrmServerSetup.PageControl1MouseDown(Sender ...

  5. 离线安装nuget包EPPlus

    1先去https://www.nuget.org/packages/EPPlus/4.1.0下载,epplus.4.1.0.nupkg 2找到本地文件位置:H:\DOWNLOAD\ 3在vs的程序包管 ...

  6. shell做成csv文件

    echo a,b,c,d >aa.csv 其实就是用逗号做分隔符

  7. python数据存储--JSON

    HTML正文存储为两种格式:JSON和CSV. 存储为JSON: 首先利用Requests访问http://seputu.com获取HTML文档: #!coding:utf-8 import requ ...

  8. 'caching_sha2_password' cannot be loaded

    Authentication plugin 'caching_sha2_password' cannot be loaded 下载新版(8+)mysql的时候,我使用的版本8.0.16,使用图形客户端 ...

  9. core python

    一:正则表达式 闭包操作符 | 等同于 or   exp:a|b|c           . 匹配任意一个字符 (若匹配本字符,需转义使用 \.   不能匹配换行符\n及空字符串)    (^:匹配首 ...

  10. CentOS7中yum配置

    1.打开centos的yum文件夹 输入命令cd  /etc/yum.repos.d/ 2.用wget下载repo文件 输入命令wget  http://mirrors.aliyun.com/repo ...