Maison > interface Web > js tutoriel > Une brève discussion sur les opérations DOM dans Angular

Une brève discussion sur les opérations DOM dans Angular

青灯夜游
Libérer: 2021-03-10 09:50:24
avant
2042 Les gens l'ont consulté

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.

Une brève discussion sur les opérations DOM dans Angular

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 {

      //组件和指令初始化完成   并不是真正的dom加载完成

      let oBox:any=document.getElementById(&#39;box&#39;);

      console.log(oBox.innerHTML);

      oBox.style.color="red";

      //获取不到dom节点

     /*

      let oBox1:any=document.getElementById(&#39;box1&#39;);

      console.log(oBox1.innerHTML);

      oBox1.style.color="blue";

      

     */

  }

     //视图加载完成以后触发的方法    dom加载完成  (建议把dom操作放在这个里面) 

    ngAfterViewInit(){

        let oBox1:any=document.getElementById(&#39;box1&#39;);

        console.log(oBox1.innerHTML);

        oBox1.style.color="blue";

    }

 

  showAside(){

    //原生js获取dom节点

    var asideDom:any=document.getElementById(&#39;aside&#39;);

    asideDom.style.transform="translate(0,0)";

 

 }

 

hideAside(){

   //原生js获取dom节点

   var asideDom:any=document.getElementById(&#39;aside&#39;);

   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)=&#39;getChildProp()&#39;>获取子组件header的属性</button>

<button type="button" (click)=&#39;getChildMethod()&#39;>获取子组件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 &#39;@angular/core&#39;;

 

@Component({

  selector: &#39;app-news&#39;,

  templateUrl: &#39;./news.component.html&#39;,

  styleUrls: [&#39;./news.component.less&#39;]

})

export class NewsComponent implements OnInit {

  //获取Dom

  @ViewChild(&#39;myBox&#39;)

  public myBoxIn: any;

 

  @ViewChild(&#39;header&#39;)

  public header: any;

 

  constructor() { }

 

  ngOnInit(): void {

    // console.log(this.myBoxIn)

 

  }

 

  //处理dom节点

  ngAfterViewInit() {

    console.log(this.myBoxIn.nativeElement)

 

    //父组件获取到了整个子组件header

    console.log(&#39;父组件获取到了整个子组件header&#39;)

    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 &#39;@angular/core&#39;;

 

 

// @ViewChild(&#39;header&#39;)

// public header:any;

 

// 3. 已经可以在父组件调用子组件的属性和方法了

 

 

// 父组件传值给子组件  @input   -- 子组件 得到 父组件的 数据 和 方法

 

// 父组件: home

// 子组件: header

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!

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal