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. 一步一步学ROP之linux_x86篇(蒸米spark)

    目录 一步一步学ROP之linux_x86篇(蒸米spark) 0x00 序 0x01 Control Flow Hijack 程序流劫持 0x02 Ret2libc – Bypass DEP 通过r ...

  2. Loto实践干货(8)loto示波器在LED台灯调光问题维修中的应用案例

    Loto实践干货(8)loto示波器在LED台灯调光问题维修中的应用案例 一位客户最近觉得觉得他的LED台灯好闪, 于是拆了看看,里面的控制板是这样的: 干掉双色调光功能,只调亮度的话闪烁的状况能好转 ...

  3. Obsidian中如何记录自己的灵感?

    在生活中当中你是否会在某个瞬间产生一个想法,但没过多久就想不起来了,正所谓灵感转瞬即逝,那我们不妨在灵感出现的时候顺手将他记录下来.记录的过程要求简单.方便且不会花费我们太多时间,下面我们介绍一下如何 ...

  4. SpringCloud config native 配置

    1.概述 最近项目使用springCloud 框架,使用config搭建git作为配置中心. 在私有化部署中,出现很多比较麻烦的和鸡肋的设计. 每次部署都需要安装gitlab 有些环境安装完gitla ...

  5. 百度ueditor编辑器注入漏洞修补查杀程序

    百度ueditor编辑器注入查杀程序,用于对百度ueditor的漏洞补丁进行查杀,使用时需要保证本地正确部署了.net 4.0服务. 百度ueditor编辑器是目前网上比较流行的一个网站编辑器,但由于 ...

  6. 教你用SQL进行数据分析

    摘要:采用 SQL 作为数据查询和分析的入口是一种数据全栈的思路. 本文分享自华为云社区<如何使用 SQL 对数据进行分析?>,作者:zuozewei . 前言 我们通过 OLTP(联机事 ...

  7. <C#任务导引教程>练习二

    //6,goto语句求1+++100之和using System;class Program{    static void Main()    {        int i=1,sum=0;     ...

  8. 容器安全产品Aqua调研

    前言 近年来,随着云计算的发展,企业数字化的进程不断加快,业务纷纷开始上云,云原生的概念最近两年也是十分火热,在新业务场景下也随之产生了新的安全问题,如k8s安全.devsecops.微服务安全.Se ...

  9. Aggregated APIServer 构建云原生应用最佳实践

    作者 张鹏,腾讯云容器产品工程师,拥有多年云原生项目开发落地经验.目前主要负责腾讯云 TKE 云原生 AI 产品的开发工作. 谢远东,腾讯高级工程师,Kubeflow Member.Fluid(CNC ...

  10. Timer定时器的使用

    import java.util.Timer; import java.util.TimerTask; public class Demo2 { //执行时间,时间单位为毫秒,读者可自行设定,不得小于 ...