Angular—Dom操作

一、概述

二、原生JS操作Dom

三、ViewChild操作Dom

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

一、概述

Angular中可以用原生JS操作Dom，也可以用Angular提供的ViewChild装饰器来操作Dom。ViewChild底层对原生JS进行了封装。

二、原生JS操作Dom

基本示例

<div id="box">this is a box</div>

ngOnInit(): void {// Angular中变量要指定类型let oBox: any = document.getElementById('box');oBox.style.color = 'red';
}

注意事项

ngOnInit生命周期函数触发时只能保证组件和指令初始化完成，并不是真正的dom节点加载完成。如下代码所示，因为Angular指令的存在，获取不到dom节点。

<div id="box2" *ngIf="expression">this is a box</div>

public expression = true;ngOnInit(): void {let oBox2: any = document.getElementById('box2');oBox2.style.color = 'blue'; // 报错，找不到dom节点
}

注意事项 - 解决方法

ngAfterViewInit生命周期函数在视图加载完成后触发，即dom加载完成后触发。推荐把dom操作放在该生命周期函数中。

<div id="box2" *ngIf="expression">this is a box</div>

ngAfterViewInit(): void {let oBox2: any = document.getElementById('box2');oBox2.style.color = 'blue'; // 成功获取dom节点
}

三、ViewChild操作Dom

ViewChild是属性装饰器，可以从模板视图中获取匹配的Dom节点。Dom加载在ngAfterViewInit钩子函数调用前完成，因此在ngAfterViewInit钩子函数中，能正确获取查询的Dom节点。

使用ViewChild获取Dom节点有一个前提，即使用井号给Dom节点起一个名字，如下代码所示。

<div #mybox>我是一个dom节点</div>

import { Component, OnInit, ViewChild } from '@angular/core';...@ViewChild('mybox') mybox: any; ngAfterViewInit(): void {// 获取Dom节点let el = this.mybox.nativeElement;el.style.color = 'green';
}

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

ViewChild不仅可以获取Dom节点，还可以获取一个组件的实例。

第一步：在模板中给子组件起一个名字

<app-news #news></app-news><div>我是一个dom节点
</div>

import { Component, OnInit, ViewChild } from '@angular/core';...// 获取子组件实例
@ViewChild('news') news: any;// 调用子组件的方法
this.news.onclick();

Angular—Dom操作相关推荐

ihtml2document能不能根据id获取dom_回到基础：什么是DOM及DOM操作？
译者:前端小智来源:valentinog 为了保证的可读性,本文采用意译而非直译. 文本主要介绍文档对象模型(DOM),了解什么是DOM操作,以及如何使用砶 DOM API 与 JS 中的 Web ...
MV* 框架与 DOM操作为主 JS库的案例对比
最近分别使用 Zepto 和 Avalon框架写了个 SPA项目,贴出来讨论下 JS DOM操作为主 JS库与 MV* 框架的对比案例(MV* 框架与 DOM操作 JS库实例对比) 购物车页面 ...
使用ViewContainerRef探索Angular DOM操作技术
每当我阅读中遇到,关于Angular中使用DOM的内容时,总会看到一个或几个这样的类:ElementRef,TemplateRef,ViewContainerRef等等. 不幸的是,虽然其中的一些被A ...
什么是DOM及DOM操作？
什么是 DOM ? DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口,定义了访问和操作HTML的文档的标准. W3C文档对象模型是中立于平台和语言之间的接口,它允许程序和脚本 ...
为什么DOM操作很慢
转自:http://kb.cnblogs.com/page/534571/ 一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来 ...
jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
03-老马jQuery教程-DOM操作(上）
jQuery DOM操作在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
Jquery基础之DOM操作
Jquery基础之DOM操作 Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DO ...
DOM操作之属性和样式操作
在DOM操作,除了前面的节点操作以外,常常被用到的操作还有属性操作和节点操作,下面,主要来总结一下jQuery中的属性操作方法和样式操作方法. 在开始操作前,我们需要先在html中添加如下代码,后面所 ...

Angular—Dom操作

一、概述

二、原生JS操作Dom

三、ViewChild操作Dom

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

Angular—Dom操作相关推荐

最新文章

热门文章