<app-header #header></app-header>

<div #myBox>

   我是一个dom节点
</div> <button (click)="getChildRun()">获取子组件的方法</button>
/*

ViewChild获取dom节点
1、模板中给dom起一个名字
<div #myBox>
我是一个dom节点
</div>
2、在业务逻辑里面引入ViewChild
import { Component, OnInit,ViewChild} from '@angular/core';
3、 写在类里面 @ViewChild('myBox') myBox:any;
4、ngAfterViewInit生命周期函数里面获取dom
this.myBox.nativeElement
*/ import { Component, OnInit,ViewChild} from '@angular/core'; @Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {
//获取dom节点
@ViewChild('myBox') myBox:any;
//获取一个组件
@ViewChild('header') header:any;
constructor() { } ngOnInit() {
} ngAfterViewInit(): void {
console.log(this.myBox.nativeElement);
this.myBox.nativeElement.style.width='100px';
this.myBox.nativeElement.style.height='100px';
this.myBox.nativeElement.style.background='red';
console.log(this.myBox.nativeElement.innerHTML);
} getChildRun(){ //调用子组件里面的方法
this.header.run(); }
}

效果:

Angular 中的 dom 操作(ViewChild)以及父子组件中通过 ViewChild 调用子组件的方法的更多相关文章

  1. jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...

  2. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  3. Angular @ViewChild,Angular 中的 dom 操作

    Angular 中的 dom 操作(原生 js) ngAfterViewInit(){ var boxDom:any=document.getElementById('box'); boxDom.st ...

  4. 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】

    一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...

  5. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  6. jQuery中的DOM操作<思维导图>

    DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...

  7. Jquery:jquery中的DOM操作<一>

    之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...

  8. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  9. jQuery中的DOM操作《思维导图》

    首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...

随机推荐

  1. [Docker][ansible-playbook]3 持续集成环境之分布式部署

    预计阅读时间: 30分钟 本期解决痛点如下:1. 代码版本的多样性,编译环境的多样性如何解决?答案是使用docker,将不同的编译环境images统统打包到私有仓库上,根据需求进行下载,从宿主机上挂载 ...

  2. Linux学习笔记(十六)Linux网络管理:网络基础(一)

    一.OSI7层模型协议 二.TCP/IP四层协议模型(五层) 1.网络接入层 网络接入层与OSI参考模型中的物理层和数据链路层相对应,它负责监视数据在主机和网络之间的交换.事实上,TCP/IP本身并未 ...

  3. redis windows安装与liunx安装

    windows安装redis 2.把安装包放在Linux文件系统下,利用WinSCP工具 3.解压缩 tar -zxf redis-4.0.2.tar.gz 4.切换到解压后的目录 cd redis- ...

  4. reGeorg+Proxifier使用

    reGeorg利用了socks5协议建立隧道,结合Proxifier可将目标内网代理出来. 项目地址: https://github.com/sensepost/reGeorg 该文件下支持php,a ...

  5. Spring Cloud 之 全局配置

    在微服务架构中,全局配置的重要性不言而喻.SpringCloud的全局配置存储主要基于 Git 来实现,即配置信息存储在Git服务器,以统一的方式对外提供访问.在使用上分为 ConfigServer和 ...

  6. DOORS 和Reqtify — 需求管理和需求追溯工具

    IBM Rational DOORS 可实现对整个产品的全生命周期需求管理,覆盖从需求.到设计以及测试阶段.是一款具有广泛使用的企业级专业需求管理工具.DOORS 可以将项目开发过程中产生的各级需求和 ...

  7. flask中使用ajax 处理前端请求,每隔一段时间请求不通的接口,结果展示同一页面

    需求: flask中使用ajax 处理前端请求,每隔一段时间请求不通的接口,结果展示同一页面 用到 setTimeout方法,setTimeout(function(){},1000):setTime ...

  8. python中的lambda()函数

    语句:print map(lambda x:x ** 2,[1,2,3,4,5]) 其中lambda()函数在Python文档,文档中解释如下: lambda An anonymous inline ...

  9. 关于创建Django表单Forms继承BaseForm的问题

    在创建Django表单时,因为需要验证用户输入的验证码是否正确,因此需要在session里提取当前验证码的值和POST提交过来的值进行比对,如图: form.py from django import ...

  10. Tomcat报错:Java.long.nullpointerException,详细是resp.getwriter.write报错

    报错原因: 空指针 在out.write(name);时,name不能为null,哪怕你随便给name赋值为xxoo啥的都可以,不要为null 改正:String name = "fail& ...