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 = [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 = (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{}泛型
泛型就是解决类 接口 方法的复用性,以及对不确定数据类型的支持
function getMin(arr:T[]):T{}
传入的参数 [1,2,3,4] ['a','b','c','d']
泛型类
class GetMin{min():T{}
} 创建组件
ng g component components/news
基础知识
绑定属性
鼠标附上去
绑定html
*ngFor="let item of list"
拿到循环的索引*ngIf 做条件判断
//ngSwitch ngSwitchCase
表示已经支持
确认订单
默认显示
[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],
组件通信
父子组件传值父组件
属性 [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
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
}Heroes
//路由出口
问号传参
//在ts中
import {ActivatedRoute} from '@angular/router'
constructor(public route:ActivatedRoute) { }this.route.queryParams.subscribe(data=>{console.log(data);})
获取问号传参的值动态路由
redirectTo: '/dashboard' 重定向
//配置连路由
{path:'xxx/:id'
}{{item}}
// 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 时间插件
转载于:https://www.cnblogs.com/fangdongdemao/p/10746609.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！