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. Nginx事件管理之概念描述

    1. Nginx事件管理概述 首先,Nginx定义了一个核心模块ngx_events_module,这样在Nginx启动时会调用ngx_init_cycle方法解析配置项,一旦在 nginx.conf ...

  2. 软工团队Git现场编程实战

    组员职责分工 成员 分工 鲍子涵 分配职责,整合代码 吴宜航 UI设计与实现 钟博 UI设计与实现(Main Coder) 黄海东 数据整理 王镇隆 前端api接口分析和使用(Main Coder) ...

  3. phpmyadmin 导入sql报错(sql为phpstudy内置数据库导出来)

    解决方法 1.打开sql,把头部注释去掉

  4. under the hood

    under the hood adjective a metaphorical area that contains the underlying implementation of somethin ...

  5. Coding Rules

    c语言按行读取的时候,注意用fgets可以读一行,但默认会把换行符也读进去,使用scanf("%s")却不会.

  6. 利用Viewpager和Fragment实现UI框架的搭建实现

    package com.loaderman.uiframedemo; import android.os.Bundle; import android.support.v4.app.Fragment; ...

  7. [ubuntu]android SDK 与Gradle环境的安装与配置|搭建android基础开发/构建环境

    系统环境: linux:ubuntu18 已配置jdk 环境变量 切换到root账户 sudo su 安装Android-sdk (0)准备工作 切换到/usr/local目录: /usr/local ...

  8. Mysql-将一张表中的数据批量导入另一张表中

    由于mysql不支持select into 方法,mysql怎样将一张表的查询结果存到另一张表中? 找了两个方法 第一种: create table dust select * from studen ...

  9. JPA 或者Hibernate 实体类说明

    这里简单介绍Hibernate的Annotation注解 一.声明实体 @Entity对实体注释.任何Hibernate映射对象都要有这个注释@Table声明此对象映射到数据库的数据表,通过它可以为实 ...

  10. Python web 项目的依赖管理工具

    Poetry可以帮助你声明.管理和安装Python项目的依赖项,确保你可以在任何地方都拥有正确的堆栈. Poetry支持Python 2.7 和Python 3以上 安装 Poetry提供了一个自定义 ...