Angular学习笔记

1.angular介绍

• 谷歌开发的开源的web框架，诞生于2009年
• angular基于Typescript
• 它和react，vue相比，angular更适合中大型企业项目
• 截止2019/12/25 angular最新版本为angular9.X。根据官方介绍，angular每过几个月就会更新一个版本，angular2.X以后的所有的angular版本用法都是一样的。

2.学习angular必备基础

• html css js(es6)
• 有ts基础更好，没有ts基础那就要学了

3.angular环境搭建

必备nodejs(npm)

安装脚手架

npm install -g @angular/cli
//全局安装，随便哪里打开终端即可

创建工作空间

ng new my-app

突然报错

ng : 无法加载文件 C:\Users\SWQ\AppData\Roaming\npm\ng.ps1，因为在此系统上禁止 运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170  中的 about_Execution_Policies。

解决方法（管理员身份打开powerShell）

自行百度

运行项目

cd my-app
ng serve --open

安装的时候会提示1.是否安装路由，2.安装什么样式预处理，3.是否数据共享(后期很熟练了我在补充这个地方)

4.文件目录结构

xxx

5.创建组件

1.创建命令行形式创建

ng g component components/new
//简写 ng g c components/new
//components/new 这个是我们想创建的文件路径以及文件名
// 命令行形式的创建组件，组件会自动的在aap.module.ts被引入和注册

2.使用

根据组件文件夹中 组件名.components.ts =》@Component=》selector 的名称，和vue

类似，直接标签形式使用即可

3.组件中定义数据

组件的ts文件中

export class FooterComponent implements OnInit {
 //这就是我自己定义的数据title
 //不写也可以 默认就是pubilc
  public title="我是一个footer组件的数据";
 //ts中定义数据，建议定义类型，怎么玩？ any(任意类型)
  username:string='潇洒哥'; 
  public student:any=['qwe'];
  public arr2:Array<number>=[1,2,3,4,5]; //定义一个数组，并限制数组每一项的类型
  constructor() { }

  ngOnInit(): void {
  }

}

组件的html文件中

{{title}} {{username}}
//直接用即可

声明属性的几种方式：

1. public 共有 可以在这个类中使用，也可以在这个类外面使用

2. protexted 保护类型 只能在这个类中，或者它的子类中使用

3. private 私有 只能这个类中使用

4. 千万别习惯性的用var 去定义

6.Angular常用的指令

• 组件绑定数据（和vue中v-bind类似）

<div [title]="say">
    鼠标放上去会有什么效果呢
</div>
<!-- 用[] say是我组件中的数据 -->

• 如果数据是一个html字符串怎么处理（和vue-html类似） 默认不处理原样输出

  com:string='<h1>这是我自己html字符串</h1>';
  
  <div >
     <span [innerHTML]='com'></span> 
  </div>
  
  

• {{中间允许简单的计算}}

  1+2={{1+2}}
  

• 循环数据 *ngFor

  <ul>
    <li *ngFor="let item of list;let key=index;">
      {{item.title}} 索引为{{key}}
    </li>
  </ul>
  

• 引入图片

  <!-- 引入本地图片 -->
  <img src="assets/images/jiaoben.png" alt="1">
  
  <!-- 引入网络上的图片 -->
  <img [src]="pirUrl" alt="2">
  

• *ngif

  <!-- *ngif -->
  <h1>条件判断语句 *ngif</h1>
  <div *ngIf="flag">
    <img src="assets/images/sc.png" alt="">
  </div>
  
  <div *ngIf="!flag">
    <img src="assets/images/sc_a.png" alt="">
  </div>
  

• ngSwitch

  <!-- ngSwitch -->
  
  <div [ngSwitch]="orderStatus">
      <div *ngSwitchCase="1">已经支付</div>
      <div *ngSwitchCase="2">已经发货</div>
      <div *ngSwitchCase="3">已经收货</div>
      <div *ngSwitchCase="4">已经退货</div>
      <div *ngSwitchDefault>无效</div>
  </div>
  

• ngClass

  .red{
      color: red;
  }
  
  .big{
      font-size: 48px;
  }
  

  <div [ngClass]="{'red': flag,'big':!flag}">
    ngClass指令
  </div>
  

• ngStyle

  <!-- ngStyle -->
  <div [ngStyle]="{'color': 'blue'}">
    ngStyle的使用
  </div>
  

• 管道 （感觉和Vue过滤器有点相似）

  别人博客总结的：angular管道 https://blog.csdn.net/liusuxilinyue/article/details/86680223

  <!-- 过滤器（管道） 下面的代码可以让时间变成我们想要的格式-->
  
  <div>
      {{today | date:'yyyy-MM-dd HH:mm ss'}}
  </div>
  

• 绑定事件

  <!-- 绑定事件 事件后面的括号我省略了没反应 那就写吧-->
  <h3 (click)='toSay()'>点我触发事件</h3>
  
  <h3 (click)='toSay2()'>点我改变上面星星的颜色</h3>
  

  // 就在ngOnInit后面写自己的方法即可，不需要加，因为我们是ts
    toSay(){
    alert('事件绑定成功')
    }
  
    toSay2(){
     this.flag=!this.flag
    }
  

• 表单事件 事件对象

  <!-- 表单事件 事件对象 -->
  <!-- <input type="text" (keydown)='down()'> -->
  
  <input type="text" (keydown)='down($event)'>
  

down(e) {
    // 按了回车接受输入框中的值
    console.log(e.target)
    if (e.keyCode == 13) {
      console.log(e.target.value)
    }
  }

​

• 双向数据绑定

  • //app.module.ts 引入
    import {FormsModule} from '@angular/forms'
    //在 @NgModule 中的 imports 注册 FormsModule
    

  • <h1>双向数据绑定 只针对表单</h1>
    <!-- 双向数据绑定 MVVM视图改变数据改变，数据改变视图改变 只针对表单-->
    <input type="text" [(ngModel)]="keywords"> {{keywords}}
    <button (click)='changeKeywords()'>改变左边的的值</button>
    

  •  public keywords:string='默认值'
     changeKeywords(){
        this.keywords='变化后的值'
      }
    

7.Angular中的服务

• 组件的方法 不能互相调用
• 有公共的方法，可以放在service（服务）中

创建服务

• // 1.创建服务
  ng g service services/storage
  

• // 2.app.module.ts 引入并配置服务
  import {StorageService} from './services/storage.service'
  
  //在 @NgModule 中的 providers 注册 StorageService
  

• // 3.组件的.ts文件中 引入
  import {StorageService} from '../../services/storage.service'
  

•  //4. 组件的.ts文件中 使用
   constructor(public storage: StorageService) {
      console.log(storage.swq())
    }
  

8.Angular 中的DOM操作

• 方法一 通过DOM操作

  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.less']
  })
  export class HomeComponent implements OnInit {
  
    public flag: any = true
  
    constructor() { }
  
    ngOnInit(): void {
      // ngOnInit 组件和指令初始化完成时的钩子函数
  
      // angular 动画效果 实现 
  
      // 方法一 通过DOM操作
      let dv = document.getElementById('dv')
      dv.style.color = 'red'
      console.log(dv.innerHTML)
  
  
      //获取不到DOM节点 因为我们是ng去控制的
      /*  let dv2:any =document.getElementById('dv2')
       dv2.style.color='red'
       console.log(dv2.innerHTML) */
  
    }
  
    //  视图加载完成以后 dom加载完成（建议吧都DOM操作放在这里）
    ngAfterViewInit(): void {
      let dv2:any =document.getElementById('dv2')
      dv2.style.color='red'
      console.log(dv2.innerHTML)
  
    }
  
  }
  

• 方法二 通过ViewChild操作

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

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

  //获取DOM节点
  @ViewChild('MyBox') ElementRef:any

  constructor() { }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
 
  console.log(this.ElementRef.nativeElement.innerHTML)

  this.ElementRef.nativeElement.style.width='100px'
  this.ElementRef.nativeElement.style.color="yellow"
  }

}

@ViewChild总结

• 总结 利用 @ViewChild 获取DOM节点

  • html中给DOM起个名字

    <div #MyBox>
        我是new
    </div>
    

  • 在业务逻辑中引入

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

  • 在类里面写

     @ViewChild('MyBox') ElementRef:any
    

  • 使用

    this.ElementRef
    

• 总结利用@ViewChild 获取子组件并调用子组件的方法

  • 引入组件

    <app-header #hs></app-header>
    

  • 引入ViewChild

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

  • 获取到子组件

      //获取子组件
      @ViewChild('hs') hs:any
    

  • 使用this 调用对应的组件实例

       this.hs.say_yan()
    

9.Angular父子组件的通信

• 父传子

  • 父组件的html中使用子组件，直接绑定属性

    <app-header [smsg]="msg"></app-header>
    

  • 子组件引入input模块

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

  • 子组件类中接受变量

    // 接受父组件传来的数据
      @Input() smsg: string;
    
    

  • 子组件使用父组件的数据

    <div>
        我是子组件
        <p>{{smsg}}</p>
    </div>
    
    

  总结：父传子，上述方法，可以 (1)传递变量，(2) 传递数据，也可以 (3) 直接传递this，将父组件传递给子组件.

• 子传父

  • 利用上面写的 @ViewChild，可以实现 父组件获取子组件数据

• 非父子组件

  • Service

  • localStorage