Angular 8 学习（六 viewchild操作DOM）

我就是我 2024-04-17 16:35 63阅读 0赞

# Angular可以有两种操作DOM的方式，一种原生的js操作DOM，一种viewchile操作 #

## 一 、首先讲一下原生js操作： ##

### 1.在html标签中加入id ###

### 2.在ts文件中使用原生js操作： ###

\*\*\*\*注意的是在操作DOM的代码放在ngAfterViewInit()方法中：

ngAfterViewInit(): void {
     
       var div2:any =  document.getElementById("div2");
    
       alert(div2); 
      }

![20190828180310230.png][]

## 二 、接下来使用viewchile操作： ##

### 1.在html中起名使用\#名字 ###

### 2.在ts文件中引入viewchild ###

![20190828180525640.png][]

### 3.使用@ViewChild进行获取 ###

@ViewChild('div1', {static: true}) mydiv: any;

# 注意：我这里使用的是angular8，8以前的版本只要一个参数就可以 #

### 4.在生命周期函数中使用 ###

ngAfterViewInit(): void {
        
        console.log(this.mydiv)
        this.mydiv.nativeElement.style.color="pink";
    
      }

## 三 、父组件通过viewchild调用子组件的方法 ##

这里我创建了两个组件，父组件为news ，子组件是header

现在news组件中要使用header子组件中的run方法：

### 1.给子组件起名 ###

<h1>引入header</h1>
    
    <app-header #header></app-header>

### 2.引入viewchild，和上面的一样 ###

### 3.使用@ViewChild进行获取，同上 ###

### 4.调用子组件中的run方法： ###

<br>
    <h1>引入header</h1>
    
    <app-header #header></app-header>
    
    <button (click)="goHeaderRun()">news调用header的run方法</button>

goHeaderRun(){
        this.header.run();
      }

记录不宜，求关注

[20190828180310230.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/389bf0e6e23c4ed0b019cedadd326c27.png
[20190828180525640.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/93bc9ea894dd4c9b9b84fe9b00201b5a.png

Angular 8 学习（六 viewchild操作DOM）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关【angular获取dom】【@ViewChild】【ElementRef】【Renderer2】【pipe】【subject】

相关 Angular 8 学习（六 viewchild操作DOM）

相关 Angular 8.x使用ViewChild报错

相关绑定dom angular 【结构型指令】@ViewChild ElementRef *ngTemplateOutlet

相关 Angular6 学习笔记——内容投影, ViewChild和ContentChild

相关 Angular学习笔记（六）-Angular操作dom实现侧边栏的显示与隐藏的动画效果

相关 angular操作dom

相关 Angular 正确使用 @ViewChild、@ViewChildren 访问 DOM、组件、指令

相关 Angular2+ ViewChild & ViewChildren解析

相关 AngularJS操作DOM----angular.element