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 ...
随机推荐
- 检查redis是否正常运行
[XX@XXX]$ ps -ef | grep redisXX 8047 1 0 10:06 ? 00:00:03 redis-server *:6379XX 9983 9802 0 11:2 ...
- 痞子衡嵌入式:聊聊i.MXRT1xxx上的普通GPIO与高速GPIO差异及其用法
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT上的普通GPIO与高速GPIO差异. GPIO 可以说是 MCU 上最简单最常用的外设模块了,当一些原生功能外设接口模块不能 ...
- 2021.11.2-测试T1数独
痛苦 题目 数 独 [问题描述] 给定一个9*9矩阵,对其进行几种操作,分别是插入,删除,合并,查询,输出 主要学到了一些特别的操作. (1)备份( 本蒟蒻第一次了解到) (2)对与数据的一些特别的改 ...
- List of devices attached 没有手机设备号 解决办法
问题: cmd下使用adb devices 没有找到手机设备,如下图 解决办法: 采用360手机助手给我们自动安装对应的手机驱动,或者去对应的手机官网下载对应的驱动,这里手机要开启调试模式 我是opp ...
- vue脚手架项目如何在控制台打印组件实例
需要在浏览器上安装拓展程序vue开发工具,安装好后在控制台上输入$vm即可打印vue组件实例对象. Vue2.3开发工具都有,可自行下载 百度网盘链接提取码:si5l
- easypoi导出动态表头excel
easypoi导出动态表头excel 1: springBoot项目maven依赖: <dependency> <groupId>cn.afterturn</groupI ...
- dart系列之:dart语言中的异常
目录 简介 Exception和Error Throw和catch Finally 总结 简介 Exception是程序中的异常情况,在JAVA中exception有checked Exception ...
- 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 ...
- Exploring Matrix
import java.util.Scanner; public class J714 { /** * @taking input from user */ public static void ma ...
- [bzoj4553]序列
记第i个位置有三个属性:1.ai表示原来的值:2.bi表示变成最大的值:3.ci表示变成最小的值.那么对于如果i在j的前面,那么必然有:$ai\le cj$且$bi\le aj$,那么令f[i]表示以 ...