【前端】6. Angular中的 Dom操作以及@ViewChild 以及Angular执行css3动画

参考视频：https://www.bilibili.com/video/av50917863?p=8

Angular8视频教程-IT营配套笔记如下（参考自大地老师）：

一、Angular 中的 dom 操作（原生 js）

ngAfterViewInit(){
   var boxDom:any=document.getElementById('box');
   boxDom.style.color='red';
}

二、Angular 中的 dom 操作（ViewChild ）

import { Component ,ViewChild,ElementRef} from '@angular/core';

@ViewChild('myattr') myattr: ElementRef;

<div #myattr>

</div>

ngAfterViewInit(){
   let attrEl = this.myattr.nativeElement;
}

三、父子组件中通过 ViewChild 调用子组件的方法

1. 调用子组件给子组件定义一个名称

<app-footer #footerChild></app-footer>

2. 引入 ViewChild

import { Component, OnInit ,ViewChild} from '@angular/core';

3. ViewChild 和刚才的子组件关联起来

@ViewChild('footerChild') footer;

4. 调用子组件

run(){
   this.footer.footerRun();
}

四、实例：Angular执行css3动画

实例效果图：

代码部分：

1.创建组件 ng g component components/transition

2.每个文件里面的代码
（1）transition.component.html中

<div>
    内容区域
    <button (click)="showAside()">弹出侧边栏</button>
    <button (click)="hiddenAside()">隐藏侧边栏</button>
</div>
<aside id="aside">

    这是一个侧边栏
</aside>

（2）transition.component.ts中

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-transition',
  templateUrl: './transition.component.html',
  styleUrls: ['./transition.component.css']
})
export class TransitionComponent implements OnInit {

 public flag:boolean=true;

  constructor() { }

  ngOnInit(): void {
  }

  //自定义方法
 showAside(){
    //用原生js获取dom节点,用dom节点来改变一下style样式
     var asideDom:any=document.getElementById('aside');
     asideDom.style.transform="translate(0,0)";
  }

  hiddenAside(){
    //用原生js获取dom节点,用dom节点来改变一下style样式
    var asideDom:any=document.getElementById('aside');
    asideDom.style.transform="translate(100%,0)";
  }

//用一个按钮实现弹出和隐藏侧边栏
      /*public flag: boolean=true; (上面有定义)
      showAside(){

        var asideDom:any=document.getElementById('aside');
        if (this.flag) {
          asideDom.style.transform="translate(0,0)";
          this.flag=false;
        } else {
          asideDom.style.transform="translate(100%,0)";
          this.flag=true;
        }
      }
      */
}

（3）transition.component.css中

#aside{
    width: 180px;
    height: 100%;
    /* 绝对定位 */
    position: absolute;
    right: 0px;
    top: 0px;
    background: #000;
    color: #fff;
    transform: translate(100%,0);
     /* 设置动画的过渡 */
    transition: all 2s;

}

（4）app.component.html中

  <app-transition></app-transition>

ng serve --o运行项目即可。

五、学习视频时不会的知识点补充

1. dom是什么？


2. ViewChild实现dom操作的步骤：


3. css中的易混点补充（class和id）

（1）定义格式：

形如id="aaa"定义的,在css中是这样设置其样式的：
#aaa{ 样式列表 } 而以class="bbb"形式定义的，在css中应该这样设置其样式： .bbb{ 样式列表 } （注意前面有一个点）

（2）ID与CLASS的使用技巧

①子级的命名的包含父命名中的部分为开头。这样方便在编写CSS时明确层次关系。
② CLASS中的子级最好不用ID。当然特殊情况特殊对待。
③ CLASS的命名最好命名用大小写合用。例 .newMovie 这样的写法与第一条结合起来使用明确关系最合适。要需要注意的是IE以外的浏览器对于大小写是很敏感的。还有就是一定要以字母开头。

（3）id的使用原则

我们知道id具有唯一性，也就是说在整个xhtml中id是不能重复的，所以我们在写网页的时候，大的结构用id，比如：logo、导航、主体内容、版权等，根据命名规范分别命名为#logo、#nav、#contenter、#copyright。还有一种情况就是：我们要通过js作用一个层，以实现某种效果的时候，用id。这也是由id的唯一性决定的。

（4）class的使用原则

class在css定义中具有普遍性，可以无限次的重复使用，这也体现了div+css布局的优越性。class常用于结构内部，这样做的好处是有利于网站代码的后期维护与修改，这样会让所有的class成为id的子级或者孙级。

（5）备注：

若出现重复定义时，从优先级来看是： Style ＞ ID ＞ Class ＞ 缺省的Html元素