一、Angular 中的 dom 操作（原生 js）
1.首先新建一个Angular项目：
在想要建立项目的目录打开命令行输入：
ng new angularDemo
2. 然后创建一个home组件
ng g component components/home
3. 组件的结构
home.component.html
<h2>这是一个home组件--DOM操作演示</h2>
<div id="box">
this is box
</div>
<br>
<div id="box1" *ngIf="flag">
this is box1
</div>
4. 写入数据
home.component.ts
import {
Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
public flag: boolean = true;
constructor() {
}
ngOnInit() {
//组件和指令初始化完成 并不是真正的dom加载完成
let oBox: any = document.getElementById('box');
console.log(oBox.innerHTML);
oBox.style.color = 'red';
//获取不到dom节点
/*
let oBox1:any=document.getElementById('box1');
console.log(oBox1.innerHTML);
oBox1.style.color="blue";
*/
}
//视图加载完成以后触发的方法 dom加载完成 （建议把dom操作放在这个里面）
ngAfterViewInit() {
let oBox1: any = document.getElementById('box1');
console.log(oBox1.innerHTML);
oBox1.style.color = 'blue';
}
}
5. 引入组件
app.component.html
<app-home></app-home>
6. 运行程序
命令行输入：
ng serve --open
运行结果：
7. 总结：
视图加载完成以后触发的方法 dom加载完成 （建议把dom操作放在这个里面）
ngAfterViewInit(){
var boxDom:any=document.getElementById('box'); boxDom.style.color='red';
}
组件和指令初始化完成 并不是真正的dom加载完成
ngOnInit() {
let oBox: any = document.getElementById('box');
console.log(oBox.innerHTML);
oBox.style.color = 'red';
}
二、Angular 中的 dom 操作（ViewChild）
1. 我们在刚刚创建的里面里面有创建一个组件news
ng g component components/news
2. 组件的结构
给dom结点命名: #+名称
<div #myBox>
我是一个dom结点.
</div>
3. 导入组件和获取结点
news.components.ts
// 1.导入组件ViewChild
import {
Component, OnInit, ViewChild } from '@angular/core';
@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.css'],
})
export class NewsComponent implements OnInit {
// 2.获取dom结点
@ViewChild('myBox') myBox: any;
constructor() {
}
ngOnInit(): void {
}
ngAfterViewInit(): void {
this.myBox.nativeElement.style.width = '200px';
this.myBox.nativeElement.style.height = '200px';
this.myBox.nativeElement.style.backgroundColor = 'orange';
}
}
4. 引入组件
app.component.html
<app-news></app-news>
6. 运行程序
命令行输入：
ng serve --open
运行结果：
7. 总结
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
三、父子组件中通过 ViewChild 调用子组件的方法
1. 定义子组件
ng g component components/header
2. 定义子组件的结构
hearder.component.html
<h1>我是一个头部组件</h1>
3. 美化组件
hearder.component.css
h1 {
text-align: center;
color: #fff;
background: #000;
}
4. 父组件引入子组件
news.component.html
<app-header #header></app-header>
<br>
<br>
<div #myBox>
我是一个dom结点.
</div>
<button (click)="getChildRun()">获取子组件的方法</button>
5. 父组件操作子组件
news.component.ts
// 1.导入组件ViewChild
import {
Component, OnInit, ViewChild } from '@angular/core';
@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.css'],
})
export class NewsComponent implements OnInit {
// 2.获取dom结点
@ViewChild('myBox') myBox: any;
// 获取子组件
@ViewChild('header') header: any;
constructor() {
}
ngOnInit(): void {
}
ngAfterViewInit(): void {
this.myBox.nativeElement.style.width = '200px';
this.myBox.nativeElement.style.height = '200px';
this.myBox.nativeElement.style.backgroundColor = 'orange';
}
// 父组件操作子组件
public getChildRun(): void {
// 调用子组件里面的方法
this.header.run();
}
}
6. 引入组件
app.component.html
<app-news></app-news>
7. 启动程序
命令行输入：
ng serve --open
运行结果：
