Angular 中的 dom 操作(原生 js)

ngAfterViewInit(){
var boxDom:any=document.getElementById('box');
boxDom.style.color='red';
}

对变量定义数据类型,防止编译报错

Angular 中的 dom 操作(ViewChild)

  1. 定义模板(模板引用)
<div #myattr></div>
  1. @ViewChild定义模板引用变量
import { Component ,ViewChild,ElementRef} from '@angular/core';
@ViewChild('myattr',{static:true}) eleRef: ElementRef;
ngAfterViewInit(){
let attrEl = this.eleRef.nativeElement;
}

myattr要与模板中的 #myattr对应,名字不能出错,eleRef是变量

父子组件中通过 ViewChild 调用子组件

  1. 调用子组件给子组件定义一个名称
<app-footer #footerChild></app-footer>
  1. 引入 ViewChild
import { Component, OnInit ,ViewChild} from '@angular/core';
  1. ViewChild 和刚才的子组件关联起来
@ViewChild('footerChild',{static:true}) footer;
  1. 调用子组件
run(){
this.footer.footerRun();
}

完整案例

  1. 模板
<app-header #header></app-header>

<div #myBox>
我是一个dom节点
</div> <button (click)="getChildRun()">获取子组件的方法</button>
  1. 逻辑定义
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',{static:true}) myBox:any;
//获取一个组件
@ViewChild('header',{static:true}) 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();
}
}

Angular8 需要添加 {static:boolean}属性,必填

  //获取header组件
@ViewChild('header',{static:true}) header:any;

												

Angular @ViewChild,Angular 中的 dom 操作的更多相关文章

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

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

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

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

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

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

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

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

  5. jQuery中的DOM操作总结

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

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

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

  7. 第三章(jQuery中的DOM操作)

    3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...

  8. JavaWeb学习笔记——jquery中的dom操作

     jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...

  9. js中的DOM操作汇总

    一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...

随机推荐

  1. 检查redis是否正常运行

    [XX@XXX]$ ps -ef | grep redisXX   8047 1 0 10:06 ? 00:00:03 redis-server *:6379XX   9983 9802 0 11:2 ...

  2. 痞子衡嵌入式:聊聊i.MXRT1xxx上的普通GPIO与高速GPIO差异及其用法

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT上的普通GPIO与高速GPIO差异. GPIO 可以说是 MCU 上最简单最常用的外设模块了,当一些原生功能外设接口模块不能 ...

  3. 2021.11.2-测试T1数独

    痛苦 题目 数 独 [问题描述] 给定一个9*9矩阵,对其进行几种操作,分别是插入,删除,合并,查询,输出 主要学到了一些特别的操作. (1)备份( 本蒟蒻第一次了解到) (2)对与数据的一些特别的改 ...

  4. List of devices attached 没有手机设备号 解决办法

    问题: cmd下使用adb devices 没有找到手机设备,如下图 解决办法: 采用360手机助手给我们自动安装对应的手机驱动,或者去对应的手机官网下载对应的驱动,这里手机要开启调试模式 我是opp ...

  5. vue脚手架项目如何在控制台打印组件实例

    需要在浏览器上安装拓展程序vue开发工具,安装好后在控制台上输入$vm即可打印vue组件实例对象. Vue2.3开发工具都有,可自行下载 百度网盘链接提取码:si5l

  6. easypoi导出动态表头excel

    easypoi导出动态表头excel 1: springBoot项目maven依赖: <dependency> <groupId>cn.afterturn</groupI ...

  7. dart系列之:dart语言中的异常

    目录 简介 Exception和Error Throw和catch Finally 总结 简介 Exception是程序中的异常情况,在JAVA中exception有checked Exception ...

  8. 13.Fibonacci数

    描述 无穷数列1,1,2,3,5,8,13,21,34,55...称为Fibonacci数列,它可以递归地定义为 F(n)=1 ...........(n=1或n=2) F(n)=F(n-1)+F(n ...

  9. Exploring Matrix

    import java.util.Scanner; public class J714 { /** * @taking input from user */ public static void ma ...

  10. [bzoj4553]序列

    记第i个位置有三个属性:1.ai表示原来的值:2.bi表示变成最大的值:3.ci表示变成最小的值.那么对于如果i在j的前面,那么必然有:$ai\le cj$且$bi\le aj$,那么令f[i]表示以 ...