Angular 中的 dom 操作(ViewChild)以及父子组件中通过 ViewChild 调用子组件的方法
<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 调用子组件的方法的更多相关文章
- jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...
- Angular @ViewChild,Angular 中的 dom 操作
Angular 中的 dom 操作(原生 js) ngAfterViewInit(){ var boxDom:any=document.getElementById('box'); boxDom.st ...
- 【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& ...
随机推荐
- Django modle基础样版
定义一个基类模版, from django.db import models class ModelBase(models.Model): """ "" ...
- 安装Windows8/Windows10时,在安装界面提示无法在此驱动器上安装Windows
该方法会清除整个硬盘上的数据,这是对整个硬盘的操作,如果你有多个硬盘,请一定要选好哪块硬盘,其他的硬盘数据不会被清除. 1.在当前的安装界面按Shift + F10,打开cmd窗口 2.输入diskp ...
- unity协程要点
使用协程做计时功能应注意 1.协程中用到的组件,变量等被置空前,应该将协程置空 2.置空协程之前应停止协程 3.为了确保同一个协程同时只运行一次,可在协程开始前添加安全代码:判断改协程是否存在,存在则 ...
- Eclipse安装zookeeper监控插件
1.在 Eclipse 菜单打开Help -> Install New Software…2.添加 url http://www.massedynamic.org/eclipse/updates ...
- Castle.Windsor依赖注入的高级应用与生存周期
1. 使用代码方式进行组件注册[依赖服务类] using System; using System.Collections.Generic; using System.Linq; using Syst ...
- java基础(5)---内存分配
一.内存分配 如: 先写下面的源代码: 如果继续写:
- 2019牛客多校B Beauty Values——思维题
题目 求所有子区间中不同元素之和. 分析 枚举相邻的相同数字形成的区间,计算它是哪些区间的子区间,每次有-1的贡献,将其从总贡献中减去. #include<bits/stdc++.h> u ...
- 20191029 牛客CSP-S提高组赛前集训营1
前一个小时看这几道题感觉要爆零 A. 仓鼠的石子游戏 分析一下发现a[i]>1a[i]>1a[i]>1时后先手必输,a[i]=1a[i]=1a[i]=1时先手必赢 然后直接看1的个数 ...
- 没有向ZK写offset数据
两天公司要学习kafka,结合之前的storm,做了一个简单的集成,之前也参考了网上的例子一些例子,发现或多或少都有一些问题.所以自己做了一个. 这个是网上其他人遇到的问题,给摘录一下,防止以后自己和 ...
- SQL数据库调优
1.使用With As做数据库递归,调优树形表结构 例如:设计表结构简化如:ID.ParentID.Name:这里的ParentID就是这个表本身的某个ID WITH cte AS ( UNION A ...