angular7一周学习

ng new xxx 创建一个项目

ng serve --open 执行一个项目

angular 使用socket.io 报错

找到polyfills.ts添加

(window as any).global=window;

ts语法

 let numbers1: number[] = [1, 2];
 let numbers2: Array<number> = [1, 2, 3];
// 另外一种定义数组类型的方式，与nunber[]等价
// Tuple（元组类型）
    let t: [string, number] = ['No.', 1];
// Enum（枚举）
    enum Operator1 { Add, Update, Delete, Select };
    let opt1: Operator1 = Operator1.Add;
    // opt1的值为0。取枚举项的默认值。
    enum Operator2 { Add = 1, Update, Delete, Select };
    let opt2: Operator2 = Operator2.Update;
    // opt2的值为2。当某一项设置了值后，后续项的值都顺次加1。
    let opt2Name: string = Operator2[2];
//any 任意
//void  空
// 强制类型转换
let obj1: any = 'This is a string.';
let len: number = (<string>obj1).length;
len = (obj1 as string).length;
//箭头函数
const s=(a:string,b:string):any=>{
    return '1'
};
let sayHello=function(word:string='hello'):string{
    return 'say'
};
//在参数后用 ? 来表示，可选参数只能在必须参数后(可选参数)
//默认参数  name:string='hello'
//并在参数前加上省略号，剩余参数只能是最后一个参数
(name:string,word?:string,...age:string[])
//lambda表达式（ () => {} ）
//类
//public 成员默认的
//private 只能在自身类可用,
//protected可在继承类中使用
//static  静态的属性和方法
属性的get和set访问器

函数重载

function pickCard(x: {suit: string, card: number}[]): number;
function pickCard(x: number): {suit: string, card: number};
function pickCard(x: any): any {
    if (typeof x == "object") {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    } else if (typeof x == 'number') {
        let pickedSuit = Math.floor(x / 13);
        return {
            suit: suits[pickedSuit],
            card: x % 13,
        }
    }
}

函数继承

extends super

类修饰符

public :公有
protedcted :保护类型   在类里面,子类可访问,类外部不能访问
private: 私有  在类里面访问
属性不加修饰符,默认公有(public)

静态属性和静态方法

static name='xx';
static say(){}
静态方法不能直接调用类的属性

多态

多态也属于继承
父类定义一个方法不去实现,让他继承的每一个子类去实现(每个子类的表现形式不一样)

抽象

提供其他类继承的基类,不能直接被实例化

并且需要在派生类中实现
abstract  抽象方法只能放在抽象类里面
abstract class Animal{
    public name:string;

    constructor(name: string) {
        this.name=name;
    }
    //抽象方法只能放在抽象类中
//用abstract关键字定义抽象类和抽象方法,抽象类中的抽象方法不包含具体实现
    abstract eat():any;
}
//不能被实例化
class Dogs extends Animal{
    constructor(name: any) {
        super(name);
    }
    eat(){
        console.log(this.name + 'xxx');
    }
}

接口

对传入的对象进行约束
/* 接口: 行为和动作的规范,对批量方法进行约束*/
//interface
//就传入对象的约束   属性的接口
//readonly  只读
interface FullName {
    firstName:string;
    secondName?:string;  //可选属性
    readonly name:string; //只读参数
}

function printName(name: FullName) {
    console.log(name.firstName + '---' + name.secondName);
}
let obj={
    age:20,
    firstName:'zz',
    secondName:'san'
};
printName(obj);
//参数的顺序可以不一样
printName({firstName:'xxx',secondName:'xxx'});

函数类型的接口
interface encrypt{
    (key:string,value:string):string;
}
let md5:encrypt=function(key:string,value:string):string{

    }
可索引的接口(对数组的约束)
    interface User{
        [index:number]:string
    }
类类型接口:对类的约束和抽象类有点相似
interface Animal{
    name:string;
    eat(str:string):void;
}
    class Dog implements Animal{
        name:string;
        constructor(name:string){
            this.name=name;
        }
        eat(){

        }
    }
接口的扩展:接口的继承方法
interface Animal{
    eat():void;
}
interface Person extends Animal{
    work():void;
}
也可以继承和接口的继承
继承多个接口
interface Shape{
    eara():number
}
interface Type{
    type:string
}
interface Circle extends Shape,Type{

}

泛型

泛型就是解决类  接口  方法的复用性,以及对不确定数据类型的支持
<T>
<number>

    function getMin<T>(arr:T[]):T{

	}
传入的参数  [1,2,3,4]  ['a','b','c','d']
泛型类
class GetMin<T>{
    min():T{

    }
}

创建组件

ng g component components/news

基础知识

绑定属性
<div [title]="msg">鼠标附上去</div>
绑定html
<div [innerHTML]="content"></div>  

*ngFor="let item of list"
拿到循环的索引
 <li *ngFor="let item of arr; let i=index">
    *ngIf 做条件判断
//ngSwitch  ngSwitchCase
<span [ngSwitch]="orderStatus">
  <p *ngSwitchCase="1">表示已经支持</p>
  <p *ngSwitchCase="2">确认订单</p>
  <p *ngSwitchDefault>默认显示</p>
</span>
[ngClass]   [ngStyle]
管道符
{{today|date:'yyyy-MM-dd HH:mm:ss'}}
{{peopleInfo|json}}  转成json格式
事件
(click)="run()"
//按下事件  字母都小写   监听事件
(keydown)="keyDown($event)"
e.keyCode == 13
###
重要
双向数据绑定
表单才有双向数据绑定
在app.module.ts 引入
    import {FormsModule} from '@angular/forms';
      imports: [
        FormsModule
      ],
<input type="text" [(ngModel)]="title">

组件通信

父子组件传值

父组件
属性 [title]="title"  方法 [run]="run"  把父亲的整个this 传给子组件  [hun]="this"
子组件中
xxx.component.ts
引入 Input模块
import { Component, OnInit ,Input} from '@angular/core';
  //接受父组件传入的数据,就可以使用啦
  @Input() title:any;
  @Input() hun:any;

父组件获取子组件的数据

//定义id
<app-header #footer></app-header>
//导入模块 ViewChild
import { Component, OnInit ,ViewChild} from '@angular/core';
//在class里面
  @ViewChild('footer') footer:any;
//通过 this.footer.xx 获取子组件的数据

子传父

引入 Output   EventEmitter
import { Component, OnInit ,Input,Output,EventEmitter} from '@angular/core';
 @Output() private outer = new EventEmitter();
//在执行方法的时候把子组件的数据传入父组件
  sendParent(){
    this.outer.emit('我是子组件的数据');
  }
父组件
<app-header (outer)="run($event)"></app-header>
 run(value){
     //value 拿到父组件的数据
    console.log(value);
  }

setter

拦截@input属性 进行操作
//子组件
public _textContent:string;
  @Input()
  set textContent(text: string){
    this._textContent = text?text:'没有';
  } ;
  get textContent(){
    return this._textContent
  }

生命周期

ngOuInit()  初始化生命周期
ngAfterViewInit()   DOM操作的生命周期
ngOnDestroy()   销毁的生命周期

服务

公共的功能放在服务里面
创建服务
ng g service services/xxx

在app.module.ts引入服务
    //引入服务
    import {StorageService} from './services/storage.service'
      //配置服务
      providers: [StorageService],
在要用的组件里面
//引入服务
import {StorageService} from '../../services/storage.service'
//导入服务
  constructor(public storage:StorageService) {
   let s= this.storage.get();
    console.log(s);
  }

Rxjs(通信不懂)

异步获取数据
Rxjs  通信

angular 中数据交互

在app.module.ts

//引入HttplientModule
import {HttpClientModule} from '@angular/common/http'
  imports: [
+    HttpClientModule
  ],
//在子组件中
import {HttpClient} from '@angular/common/http'
//在方法中
this.http.get('xxx').subscribe(res=>{
    console.log(res)
})

Post请求
在子组件中
import {HttpClient,HttpHeaders} from '@angular/common/http'
constructor(public http:HttpClient){}
//在方法中
//设置请求头(需要设置请求头)
const httpOptions={headers:new HttpHeaders({"Content-Type":"application/json"})}
this.http.post('url',{参数key:value},httpOptions).subscribe(
res=>res
)

Angular 引入jsonp

路由

在app-routing.module.ts
引入组件
{
    path:'xx',
    component:xxx
}
 <a routerLink="/heroes">Heroes</a>
//路由出口
<router-outlet></router-outlet>
//路由选中
routerLinkActive="active"

问号传参

<ul>
  <li *ngFor="let item of list1;let i=index">
    <a [routerLink]="['/home']" [queryParams]="{aid:i}">{{item}}</a>
  </li>
</ul>
//在ts中
import {ActivatedRoute} from '@angular/router'
constructor(public route:ActivatedRoute) { }
   this.route.queryParams.subscribe(data=>{
      console.log(data);
    })
获取问号传参的值

动态路由

 redirectTo: '/dashboard'  重定向
//配置连路由
{
    path:'xxx/:id'
}
 <li *ngFor="let item of list1;let key=index">
    <a [routerLink]="['/home',key]">{{item}}</a>
  </li>
// <a routerLink="/detail/{{item.id}}"></a>

import {ActivatedRoute} from '@angular/router'
constructor(public route:ActivatedRoute) { }
 this.route.params.subscribe(data=>{
      console.log(data);  //这样拿到的是变化后的值
    })

路由导航

import {Router} from '@angular/router'

 constructor( public router:Router) { }
  goNew(){
    this.router.navigate(['/fome'])
  }

传参跳转
import {Router,NavigationExtras} from '@angular/router'
 goNew(){
    let queryParams:NavigationExtras={
      queryParams:{'aid':123}
    }
    this.router.navigate(['/fome'],queryParams)
  }

子路由

{
    //注意路径中不能加 / 号 ,会报错
    path:'xxx',
    component:xxx,
        children:[
            {
                path:'xxx',
                component:xxx
            },
            {
                path:'',
                component:xxx
            },
            {
                path:'**',
                component:xxx
            }
        ]
}

获取当前路由的参数

    console.log(this.route.snapshot.queryParams);

Day.js 时间插件