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);