Cet article vous présentera les opérations DOM dans Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations associées : "Tutoriel angulaire"
Opérations Dom dans Angular et @ViewChild, exécution angulaire CSS3. animation
1.1 Fonctionnement et animation natifs js dom
Composant de démonstration : appcomponentstransition
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class = "content" >
<p>内容区域</p>
<div id= "box" >
this is box
</div>
<br>
<div id= "box1" *ngIf= "flag" >
this is box1
</div>
<button (click)= "showAside()" >弹出侧边栏</button>
<button (click)= "hideAside()" >隐藏侧边栏</button>
</div>
<aside id= "aside" >
这是一个侧边栏
</aside>
|
Copier après la connexion
Composant ts :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | public flag:boolean=true;
constructor() { }
ngOnInit(): void {
let oBox:any=document.getElementById('box');
console.log(oBox.innerHTML);
oBox.style.color= "red" ;
}
ngAfterViewInit(){
let oBox1:any=document.getElementById('box1');
console.log(oBox1.innerHTML);
oBox1.style.color= "blue" ;
}
showAside(){
var asideDom:any=document.getElementById('aside');
asideDom.style.transform= "translate(0,0)" ;
}
hideAside(){
var asideDom:any=document.getElementById('aside');
asideDom.style.transform= "translate(100%,0)" ;
}
|
Copier après la connexion
1.2 Opération DOM (ViewChild) dans Angular
ViewChild : Décorateur de propriétés
Fichier de démonstration : ngDemosrcappcomponentsnews
1. le fichier définit les attributs via #
1 2 3 | <div #myBox>
我是一个dom节点
</div>
|
Copier après la connexion
2. Maintenant, le composant ts obtient le dom
1 2 3 4 | <div #myBox>我是一个dom节点</div>
<app-header #header></app-header>
<button type= "button" (click)='getChildProp()'>获取子组件header的属性</button>
<button type= "button" (click)='getChildMethod()'>获取子组件header的方法</button>
|
Copier après la connexion
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | import { Component, OnInit, ViewChild } from '@angular/core';
@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.less']
})
export class NewsComponent implements OnInit {
@ViewChild('myBox')
public myBoxIn: any;
@ViewChild('header')
public header: any;
constructor() { }
ngOnInit(): void {
}
ngAfterViewInit() {
console.log(this.myBoxIn.nativeElement)
console.log('父组件获取到了整个子组件header')
console.log(this.header)
}
getChildProp() {
console.log(this.header.title)
}
getChildMethod() {
console.log(this.header.headRun)
this.header.headRun();
}
}
|
Copier après la connexion
via ViewChild Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation. ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!