做水果苹果大的网站/广州企业网站建设
一、Angular 中的 dom 操作（原生 js）
1.1 首先新建一个Angular项目：
在想要建立项目的目录打开命令行输入：
ng new angularDemo
1.2 然后创建一个home组件
ng g component components/home
1.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>
1.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';}
}
1.5 引入组件
app.component.html
<app-home></app-home>
1.6 运行程序
命令行输入：
ng serve --open
运行结果：
1.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）
2.1 我们在刚刚创建的里面里面有创建一个组件news
ng g component components/news
2.2 组件的结构
给dom结点命名: #+名称
<div #myBox>我是一个dom结点.
</div>
2.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';}
}
2.4 引入组件
app.component.html
<app-news></app-news>
2.5 运行程序
命令行输入：
ng serve --open
运行结果：
2.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生命周期函数里面获取domthis.myBox.nativeElement
三、父子组件中通过 ViewChild 调用子组件的方法
3.1 定义子组件
ng g component components/header
3.2 定义子组件的结构
hearder.component.html
<h1>我是一个头部组件</h1>
3.3 美化组件
hearder.component.css
h1 {text-align: center;color: #fff;background: #000;
}
3.4 父组件引入子组件
news.component.html
<app-header #header></app-header>
<br>
<br>
<div #myBox>我是一个dom结点.
</div>
<button (click)="getChildRun()">获取子组件的方法</button>
3.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();}
}
3.6 引入组件
app.component.html
<app-news></app-news>
3.7 启动程序
命令行输入：
ng serve --open
运行结果：
