Angular @ViewChild,Angular 中的 dom 操作
Angular 中的 dom 操作(原生 js)
ngAfterViewInit(){
var boxDom:any=document.getElementById('box');
boxDom.style.color='red';
}
对变量定义数据类型,防止编译报错
Angular 中的 dom 操作(ViewChild)
- 定义模板(模板引用)
<div #myattr></div>
- @ViewChild定义模板引用变量
import { Component ,ViewChild,ElementRef} from '@angular/core';
@ViewChild('myattr',{static:true}) eleRef: ElementRef;
ngAfterViewInit(){
let attrEl = this.eleRef.nativeElement;
}
myattr要与模板中的 #myattr对应,名字不能出错,eleRef是变量
父子组件中通过 ViewChild 调用子组件
- 调用子组件给子组件定义一个名称
<app-footer #footerChild></app-footer>
- 引入 ViewChild
import { Component, OnInit ,ViewChild} from '@angular/core';
- ViewChild 和刚才的子组件关联起来
@ViewChild('footerChild',{static:true}) footer;
- 调用子组件
run(){
this.footer.footerRun();
}
完整案例
- 模板
<app-header #header></app-header> <div #myBox>
我是一个dom节点
</div> <button (click)="getChildRun()">获取子组件的方法</button>
- 逻辑定义
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 操作的更多相关文章
- 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】
一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- jQuery中的DOM操作<思维导图>
DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...
- Jquery:jquery中的DOM操作<一>
之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- jQuery中的DOM操作《思维导图》
首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...
- 第三章(jQuery中的DOM操作)
3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...
- JavaWeb学习笔记——jquery中的dom操作
jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...
- js中的DOM操作汇总
一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...
随机推荐
- 一步一步学ROP之linux_x86篇(蒸米spark)
目录 一步一步学ROP之linux_x86篇(蒸米spark) 0x00 序 0x01 Control Flow Hijack 程序流劫持 0x02 Ret2libc – Bypass DEP 通过r ...
- Loto实践干货(8)loto示波器在LED台灯调光问题维修中的应用案例
Loto实践干货(8)loto示波器在LED台灯调光问题维修中的应用案例 一位客户最近觉得觉得他的LED台灯好闪, 于是拆了看看,里面的控制板是这样的: 干掉双色调光功能,只调亮度的话闪烁的状况能好转 ...
- Obsidian中如何记录自己的灵感?
在生活中当中你是否会在某个瞬间产生一个想法,但没过多久就想不起来了,正所谓灵感转瞬即逝,那我们不妨在灵感出现的时候顺手将他记录下来.记录的过程要求简单.方便且不会花费我们太多时间,下面我们介绍一下如何 ...
- SpringCloud config native 配置
1.概述 最近项目使用springCloud 框架,使用config搭建git作为配置中心. 在私有化部署中,出现很多比较麻烦的和鸡肋的设计. 每次部署都需要安装gitlab 有些环境安装完gitla ...
- 百度ueditor编辑器注入漏洞修补查杀程序
百度ueditor编辑器注入查杀程序,用于对百度ueditor的漏洞补丁进行查杀,使用时需要保证本地正确部署了.net 4.0服务. 百度ueditor编辑器是目前网上比较流行的一个网站编辑器,但由于 ...
- 教你用SQL进行数据分析
摘要:采用 SQL 作为数据查询和分析的入口是一种数据全栈的思路. 本文分享自华为云社区<如何使用 SQL 对数据进行分析?>,作者:zuozewei . 前言 我们通过 OLTP(联机事 ...
- <C#任务导引教程>练习二
//6,goto语句求1+++100之和using System;class Program{ static void Main() { int i=1,sum=0; ...
- 容器安全产品Aqua调研
前言 近年来,随着云计算的发展,企业数字化的进程不断加快,业务纷纷开始上云,云原生的概念最近两年也是十分火热,在新业务场景下也随之产生了新的安全问题,如k8s安全.devsecops.微服务安全.Se ...
- Aggregated APIServer 构建云原生应用最佳实践
作者 张鹏,腾讯云容器产品工程师,拥有多年云原生项目开发落地经验.目前主要负责腾讯云 TKE 云原生 AI 产品的开发工作. 谢远东,腾讯高级工程师,Kubeflow Member.Fluid(CNC ...
- Timer定时器的使用
import java.util.Timer; import java.util.TimerTask; public class Demo2 { //执行时间,时间单位为毫秒,读者可自行设定,不得小于 ...