Maison > Article > interface Web > Une brève discussion sur les opérations DOM dans Angular
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"
Composant de démonstration : appcomponentstransition
HTML
<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>
Composant ts :
public flag:boolean=true; constructor() { } ngOnInit(): void { //组件和指令初始化完成 并不是真正的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"; } showAside(){ //原生js获取dom节点 var asideDom:any=document.getElementById('aside'); asideDom.style.transform="translate(0,0)"; } hideAside(){ //原生js获取dom节点 var asideDom:any=document.getElementById('aside'); asideDom.style.transform="translate(100%,0)"; }
ViewChild : Décorateur de propriétés
Fichier de démonstration : ngDemosrcappcomponentsnews
1. le fichier définit les attributs via #
<div #myBox> 我是一个dom节点 </div>
2. Maintenant, le composant ts obtient le dom
<div #myBox>我是一个dom节点</div> <app-header #header></app-header> <button type="button" (click)='getChildProp()'>获取子组件header的属性</button> <button type="button" (click)='getChildMethod()'>获取子组件header的方法</button>
import { Component, OnInit, ViewChild } from '@angular/core'; @Component({ selector: 'app-news', templateUrl: './news.component.html', styleUrls: ['./news.component.less'] }) export class NewsComponent implements OnInit { //获取Dom @ViewChild('myBox') public myBoxIn: any; @ViewChild('header') public header: any; constructor() { } ngOnInit(): void { // console.log(this.myBoxIn) } //处理dom节点 ngAfterViewInit() { console.log(this.myBoxIn.nativeElement) //父组件获取到了整个子组件header console.log('父组件获取到了整个子组件header') console.log(this.header) } //获取子组件header的属性 getChildProp() { console.log(this.header.title) } //获取子组件header的方法 getChildMethod() { console.log(this.header.headRun) this.header.headRun(); } } // 父组件 news 引入 <app-header #header></app-header> // 子组件 header // 父组件 得到 子组件的 数据 和 方法 --- 子组件 传 值给父组件 // 总结: // 1. 父组件中调用子组件的时候, 给子组件一个名称 // <app-header #header></app-header> // 2. 在父组件引入viewChild // import { Component, OnInit,ViewChild } from '@angular/core'; // @ViewChild('header') // public header:any; // 3. 已经可以在父组件调用子组件的属性和方法了 // 父组件传值给子组件 @input -- 子组件 得到 父组件的 数据 和 方法 // 父组件: home // 子组件: header
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!