angular从浅入深（7以上版本笔记）

Angular

安装angular脚手架

// 前提已经安装过nodeJs
npm i -g @angular/cli

创建项目

ng new 项目名
// 如果不想让其自动安装模块依赖，可以使用下面命令
ng new 项目名 --ship-install

生命周期

• 看不懂可先了解，有一个概念就行。
• 参考文档

声明周期函数	作用
ngOnChanges()	初始化输入属性 ，Angular（重新）设置数据绑定输入属性时的响应。该方法接收 SimpleChanges 当前和先前属性值的对象。ngOnInit() 在一个或多个数据绑定输入属性发生更改 之前和之后调用。
ngOnInit()	初始化其他属性，在 Angular 首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。在第一次之后 调用一次 ngOnChanges() 。
ngDoCheck()	组件变更检测，检测 Angular 无法或不会自行检测的更改并采取相应措施。在每次更改检测运行期间，在 ngOnChanges() 和之后立即调用 ngOnInit()。
ngAfterContentInit()	投影内容初始化，在 Angular 将外部内容投影到组件的视图/指令所在的视图后进行响应。在第一次之后 调用一次 ngDoCheck()。if you want to change the child component’s props, you cannot do it in ‘ngAfterViewInit’, you need to do it in ‘ngAfterContentInit’.
ngAfterContentChecked()	针对投影内容的变更检测在 Angular 检查投射到指令/组件中的内容后响应。在 ngAfterContentInit() 随后和随后的每一次调用之后 ngDoCheck()。
ngAfterViewInit()	初始化完组件视图及其子视图之后调用 ，在 Angular 初始化组件的视图和子视图/指令所在的视图后响应。在第一次之后 调用一次 ngAfterContentChecked()。一般进行 DOM 操作
ngAfterViewChecked()	每次做完组件视图和子视图的变更检测之后调用，在 Angular 检查组件的视图和子视图/指令所在的视图后响应。在 ngAfterViewInit() 随后和随后的每一次调用之后 ngAfterContentChecked()。
ngOnDestroy()	当Angular每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏，就在 Angular 破坏指令/组件之前进行清理。取消订阅 Observable 并分离事件处理程序以避免内存泄漏。在 Angular 破坏指令/组件之前 调用。组件销毁时执行

定义数据

// 在 项目名.component.ts里面定义
export class 项目名 implements OnInit {
  // 四种定义数据的方式
  public title='我是定义的数据1' // 使用费public声明一个属性

  msg = '我是定义的数据2'  // 默认public可以省略

  username:string = '张三' // 指定类型的定义数据，angular基于typescript

  
  public student:any = '我是一个学生的属性'  // 同上，any指允许任何类型

/* 
声明属性的几种方式
  public   共有 *（默认）。 可以在这个类里面使用，也可以在类外面使用
  protected  保护类型   他只有在当前类和他的子类里面可以访问
  private    私有。     只有在当前类才可以访问这个属性
*/

// 调用
在html中
{{title}}   // 使用花括号调用
在ts中  使用this. 调用

}

组件传参

• 传参文档

• 父传子 ·@Input

  // 1. 调用子组件时，定义一个自定义属性
  <children [title]='title'></children>
  // 2. 子组件接收这个值，引入Input模块（装饰器）
  import { Input } from "@angular/core"
  @Input() title:any;  // 接收父组件传过来的值  
  // 3. 在子组件Html中渲染
  
  // 传数组、对象、方法方式一样，传整个父组件用 this
  

• 子传父 @Output

  • 使用 ViewChild

  // 1. 在子组件内定义一个数据 child.ts
        public msg:string="这是在子组件中定义的数据"
  // 2. 在父组件中子组件的渲染出口定义一个 id
        <app-child #child></app-child>
  // 3. 在父组件.ts中引入ViewChild装饰器
        import { ViewChild } from "@angular/core"
        @ViewChild('child',{static:true}) child:any
  // 4. 在父组件中绑定事件，在事件中获取子组件传的数据
        getChildMsg() {
          // 获取footer子组件的数据
          alert(this.child.msg)
        }
  

  • 在子组件类中导入 Output 和EventEmitter

  // 在子组件类中导入 OUtput 和 EventEmitter
  import { Output, EventEmitter } from '@angular/core'
  // 用@Output()装饰一个属性。
  // newItemEvent 这个 @output()的名字
  // EventEmitter<string> 这个@Output（）的类型
  // new EventEmitter<string>() 使用angular来创建一个新的事件发射器，它发射出的数据时string类型的。
  @Output() newItemEvent = new EventEmitter<string>()
  // 在同一组件创建一个 addNewItem()方法 **.component.ts
  export class ItemOutputComponent {
    @Output() newItemEvent = new EventEmitter<string>();
    // 定义value的数据类型为string
    addNewItem(value:string) {
      this.newItemEvent.emit(value)
    }
  }
  // 配置子组件模板 **.component.html
  <label for="item-input">Add an item:</label>
  <input type="text" id="item-input" #newItem>
  // #newItem变量的value属性储存到了用户输入的<input>中的值
  <button (click)="addItem(newItem.value)">点击传参</button>
  
  // 配置父组件 app.component.ts
  export class AppComponent {
    items = ['item1', 'item2', 'item3','item4'];
    
    // addItem()方法接受一个字符串形式的参数，然后把该字符串添加到items数组中
    addItem(newItem:string) {
      this.items.push(newItem)
    }
  }
    // 配置父组件的模板
  // 在父模板中，把父组件的方法绑定到子组件的事件上
  // 把子组件选择器 (<app-item-output>)放在父组件的模板 app.component.html中
  // src/app/app.component.html  把子组件中的newItemEvent事件链接到父组件的addItem()方法 $event中包含了子组件模板上的<input>中键入的数据
  <app-item-output (newItemEvent)="addItem($event)"></app-item-output>
  
  

路由

• 分配路由

  // 在 app-routing.module.ts中分配路由
  const routes: Routes = [
    {
    path:'home',component:HomeComponent,
  },
  {
    path:'foo',component:FooComponent,
    //设置子路由
    children: [
      {
        path:'childA',component:ChildAComponent,
      },
      {
        path:'childB',component:ChildBComponent,
      }
    ]
  },
  {
    // 设置路由重定向 redirect to home
    path:'',redirectTo:'/home',pathMatch:'full'
  },
  {
    // **通配符，匹配没有定义的路由，可以用来展示404页面，放在最后
    path:'**',component:HomeComponent
  }
  ]
  

• 添加到应用中

  // 在 app.component.html 中写渲染出口
  <router-outlet></router-outlet>
  
  // 跳转路由
  <p routerLink='/home'>home-component</p>
  

路由传参

• 参考文档

• 查询参数中传递参数 路由拼接形式 /id=3

      // 在a标签上添加一个参数 `queryParams` 
      <a [routerLink]="['/tab]" [queryParams]="{id:3}">tab</a>
      // 在tab.component.ts中引入
      import { ActivatedRoute } from '@angular/router'
      // 然后在构造函数中注入
      constructor(private routerinfo:ActivatedRoute) {}
      // 获取传来的参数，声明一个变量并把路由参数的值传给它
      private id:number // private 私有属性前缀
      ngOnInit() {
        // id 为参数名字
        this.id = this.routerinfo.snapshot.queryParams["id"]
      }
      // 页面中展示 id
      <p>查询到的id为---{{id}}</p>
  

• 路由路径(url)中传递参数

  • 修改路由配置文件path

{  path:'tab/:name',  component:TabComponent,}// a标签设置<a [routerLink]="['/tab','我是url传递参数']"></a>// 在tab.component.ts中引入import { ActivatedRoute } from '@angular/router'// 然后在构造函数中注入constructor(private routerinfo:ActivatedRoute) {}// tab 中获取参数private name  ngOnInit() {    this.name = this.routerinfo.snapshot.params['name']  }// 页面中展示name<p>  通过url传递的name----{{name}}</p>

• 动态路由传参

// 动态参数用[]包裹，传多个值用逗号隔开[routerLink]="[/detail]" [queryParams]="{id:[item.id],name:[item.name]}"

路由懒加载

• 创建项目使用 --route 标志

ng new customer-app --routing

• 创建一个带路由标志的特性模块

  ng generate module customers --route customers --module app.module    // 第一个 customers 是创建的文件名 第二个 customers是分配的路由名    // 简写为    ng g m components/customers --route customers --module app.module    // 创建一个compones文件夹，在它下面创建一个customers文件，分配的路由是 /customers    // 空路由重定向到根页面    {      path:'',      redirectTo:'',      pathMatch:'full'    }

管道

• 自定义angular管道：

// 创建管道
// 在pipeCase文件夹下创建pipeCase管道
   ng g pipe pipeCase/pipeCase
// 生成 pipe-case.pipe.spec.ts 和 pipe-case.pipe.ts
// 在 pipe-case.pipe.ts 中定义
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'pipeCase' // 创建时输入的名字
})
export class PipeCasePipe implements PipeTransform {
//具体定义在下方
  transform(value: any, ages?: any): any {
    switch (value !== '') {
      case value === 'id':
        return '编号';
      case value === 'name':
        return '姓名';
      case value === 'age':
        return '年龄';
      case value === 'hobby':
        return '爱好';
    }
  }
}
// 在页面的ts文件里定义假数据测试
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'AngularCase';
  getKeys = Object.keys; // 获取对象key的方法，方便在遍历时使用
  obj: any = [
    {
      id: 0,
      name: '小明',
      age: '18',
      hobby: '打球',
    },
    {
      id: 1,
      name: '小王',
      age: '20',
      hobby: '吃辣条',
    },
    {
      id: 2,
      name: '小红',
      age: '16',
      hobby: '学习',
    },
    {
      id: 3,
      name: '小李',
      age: '20',
      hobby: '打游戏',
    }
  ];
}
// 在HTML里面引用
<div *ngFor="let item of obj; let i = index">
  <div *ngFor="let val of getKeys(item); let i = index">
    {{val|pipeCase}} : {{item[val]}}
  </div>
</div>

使用管道后

• 管道操作符 |

• 常用管道

  • 大小写转换管道

    uppercase 将字符串转换为大写   <p>将字符串转为大写 {{str | uppercase}} </p>lowercase 将字符串转换为小写
    

  • 日期管道

    date 日期管道符可以接受参数，用来规定输出日期的格式。<p>现在的时间是 {{today | date:'yyyy-MM-dd HH:mm:ss'}} </p>today:Date = new Date()页面会显示现在时间 2021年5月25日16时43分53秒
    

  • 小数管道

    number管道用来将数字处理为我们需要的小数格式

    接受的参数格式为{最小整数位}.{最少小数位数}-{最多小数位数}

    其中最少整数位数默认为1

    最少小数位数默认为0

    最多小数位数默认为3

    当小数位数少于规定的{最少小数位数}时，会自动补0

    当小数位数多于规定的{最多小数位数}时，会四舍五入

    <p>圆周率 {{pi | number:'2.2-4'}} </p>页面会显示  圆周率是 03.14159
    

  • 货币管道

    currency 管道用来将数字专为货币格式

    <p> {{a | currency:'USD':false}} </p><p> {{b | currency:'RMB':true:'4.2-2'}} </p>// 当为true时，显示$符。后面的规定小数位数的参数和上面的一样
    

数据双向绑定

[(ngModel)] 是angular的双向绑定语法

• 使用双向绑定要在 app.module.ts 中引入FormsModule

import {FormsModule} from '@angular/forms'// 再加入 @NgModule imports区域imports: [  FormsModule]

*ngFor

• 功能和使用方式和vue相同

组件

• 创建一个组件

  ng g c components/newcomponent// 在app下创建一个components文件夹，并在文件夹下创建一个newcompinent新组件,如果有该文件夹会直接在文件夹下创建组件
  

• 引用组件

  // 直接在需要引入的html里面引入 <app-组件名></app-组件名>
  

  click事件

  // click 外面的括号会让Angular监听元素的click事件，当点击元素时，Angular就会执行表达式onSelect(hero)(click) = "onSelect(hero)"// 下一步，在 元素名.component.ts上定义一个onSelect()方法onSelect(hero : Hero): void {  console.log(hero) // Hero是定义过的数据类型}
  

使用HTTP请求后台接口

• 第一步

  • 在根组件 app.module.ts 中引入 HttpClientModule模块

  // app.module.ts// 引入HttpClientModule模块import { HttpClientModule } from "@angular/common/http" // 声明 HTTP模块imports {  HttpClientModule}
  

• 第二步

  • 在使用的组件的ts中引入HttpClient

  // 1. 引入HTTP模块import { HttpClient } from "@angular/common/http"// 2. 在组件内的构造函数中实力化 HttpClientconstructor(private http:HttpClient){}// 3. 创建用来接收数据的变量public anyList:any// 4. 通过HTTP的get方法请求数据ngOnInit() {  this.http.get('url').subscribe(res=>{this.anyList = res})}