constructor(){

   this.name=’张三’

}

public userinfo:object={

name:’张三’，

age:’20’

}

public contant=’<div>123</div>’

<div [innerHTML]=’contant’>

<div [ngClass]=”{ ‘box1’:ture }”>

<li *ngFor=”let item of data1;let key=index” [ngClass]=”{red:key==0}”></li>

<li [ngStyle]=”{‘color’:licolor}”></li>

private licolor:ang=”red”;

<input [value]=”myData”/>

pubilc picUrl:string=”../../../assets/a.JPG”;

<img [src]=”picUrl”>

键盘事件

keydown

keyDown(e){

console.log(e);

console.log(e.key);

console.log(e.keyCode);

}

<input type=”text” (keydown)=”kayDown($event)”>

键盘事件

keyup

keyUp(e){console.log(e.target.value)}

<input type=”text” (keyup)=”kayUp($event)”>

鼠标点击事件

click

//点击后获取数据

public title:any=”原始标题”;

getData(){alert(this.title)}

<button (click)=”getData”>点击</button>

//点击后设置数据

public title:any=”原始标题”;

setData(){this.title=”标题被改变”}

<button (click)=”setData”>点击</button>

//点击后获取对象

getDom(e){var dom=e.target;dom.style.color=”red”}

<button (click)=”getDom($event)” >点击</button>

指令

例子

解释

ng-app

初始化应用程序

ng-init

初始化数据

ng-module

把元素绑定到应用程序

ng-repeat

重复HTML元素

ng-module

<form name=’myForm’>

<input type=’email’ ng-module=’myText’ name=’myAddress’>

<p>点击</p>

{{myForm.myAddress.$valid}}

{{ myForm.myAddress.$dirty}}

</form>

将输入域的值与变量绑定,可以为应用数据提供状态值

Invalid:输入值合法时为ture

dirty:值改变时为

touched:通过触屏点击为ture

error:

 *ngFor

//数据
public arr:any[]=[{“title”:”1”},{“title”:”2”},{“title”:”3”}]
//循环ngFor
<ul>
  <li *ngFor=”let item of arr;let key=index”></li>
</ul>

ngFor用作循环

用处

命令

解释

查看angular版本

ng version

创建项目

ng new demo

运行项目

ng serve –open

创建有哪些参数

ng g

创建组件

ng g component comments/header

定义：public today:any=new Date()

使用：{{today | date : ‘yyyy-MM-dd HH-mm-ss‘}}

转换成大写：{{data1 | uppercase}}

转换成小写：{{data1 | lowercase}}

格式：最少整数位数.最少小数位数-最多整数位数

{{data2 | number:1.2-4}}

<input type='radio' value="男" name="sex" id="sex1" [(ngModel)]="userInfo.userSex"><label for='sex1'>男</label>

<input type='radio' value="女" name="sex" id="sex1" [(ngModel)]="userInfo.userSex"><label for='sex1'>女</label>

 ngModle 绑定Value值，当ngModel值和value值相同，默认被选中

<span *ngFor=’item of userInfo.hobby’>

<input type=’checkbox’ [(ngModel)]=’item.checked’ />

</span>

双向绑定的是check的value，被选中则为true

select

option

<select name=’’ [(ngModel)]=’item’>

  <option [value]=’item’ *ngFor=’item of userInfo.cityList’>{{item}}</option>

</select>

Select里双向绑定的是被选中的option的value

输出

<input type=”text” [(ngModel)]=”keyword”/>

<button (click)=”zengjia()”></button>

<ul>

<li *ngFor=”let item of arr; let key=index”>{{item}}  <button (click)=”delete(key)”>删除</button></li>

</ul>

public arr:any[]=[];

public keyword:any;

zengjia(){//检测是否存在相同值

if(this.arr.indexOf(this.keyword)==-1){

this.arr.push(this.keyword)

}

}

delete(key){

this.arr.splice(key,1)

}

1.1创建服务

ng g service services/storage

3.1组件中引入服务

import {StorageService} from '../../services/storage.service';

set(key:any,value:any){

  localStorage.setItem(key,JSON.stringify(value));

  }

//从localstorage取出

  get(key:any){

    return JSON.parse(localStorage.getItem(key))

  }

//从localstorage移除

  remove(key:any){

    localStorage.removeItem(key)

  }

@NgModule({

providers: [StorageService],

})

3.2组件中注册constructor(public storage:StorageService) { }

3.3组件中使用服务类中的方法

this.storage.set('todolist',this.todoList);

   ngOnInit() {

      var localList=this.storage.get('todolist');

      this.todoList=localList;

  }

子组件中内容

public msgFromFather:any=”我是父组件传给子组件的值”

<app-header [childMsg]=”msgFromFather”></app-header>

import {Import} from ‘@angular/core’;

@imprrt() childMsg:any;

getMsg(){

console.log(this.childMsg)

}

funFromFather(){alert(“父组件方法”)}

<app-header [run]=”funFromFather”></app-header>

import {Import} from ‘@angular/core’;

@Input run:any

getRun(){

     this.run()

}

public msg:any=”首页”

<app-header [home]=”this”></app-header>

import {Input} from ‘@angular/core’

@Input home:any;

getFatherMag(){

   alert(this.home.msg)

}

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

import {ViewChild} from ‘@angular/core’

@ViewChild(“header”) box2

getChildMsg(){

    return this.box2.msg;

 }

getChildFunc(){

return this.box.run()

}

public msg:any=”子组件的数据”

run(){alert(“子组件的方法”)}

<app-header (outer)=”runParent($event)”></app-header>

runParent(e){alert(outer)}

<button (click)="setParent('传入值')"></button>

import {Output,EventEmitter} from ‘@angular/core’

@Output() private outer=new EventEmitter<string>(); //实例化

setParent(data){this.outer.emit(data)}

getCallbackData(cb){

  setTimeout(() => {

    var username = "jennifer";

    cb(username);

  },1000);

}

construct(p){public request:RequestService}

ngOnInit(){

  this.request.getCallbackData(

    (data) => {console.log(data)}

  )

}

cb函数作为getCallbackData的参数被传进，然后被异步函数setTimeOut调用

回调函数：将一个函数作为参数传入到另一函数

getPromiseData(){

  return new Promise((resolve,reject) => {

    setTimeout(() => {

        var username = "jennifer";

        resolve(username);

      },1000);

  }) 

}

construct(p){public request:RequestService}

ngOnInit(){

  this.request.getPromiseData().then(

    (data) => {console.log(data)}

  )

}

getPromiseData里的异步函数setTimeOut执行成功后就调用resolve函数

Promise.then()设置resolve()和reject()内容

import {Observable} from 'rxjs';

getRxjsData(){

  let steam = new Obervable(observer =>{

    setTimeout(() => {

      var username = "jennifer";

      obsever.next(username);

      observer.error("失败")

    },1000);

  })

}

construct(p){public request:RequestService}

ngOnInit(){

  var rxjs = this.request.getRxjsData();

  rxjs.subscribe(

    (data) => {console.log(data)}

  )

}

import {Observable} from 'rxjs';

getRxjsData(){

  let steam = new Obervable(observer =>{

    setTimeout(() => {

      var username = "jennifer";

      obsever.next(username);

      observer.error("失败")

    },3000);

  })

}

construct(p){public request:RequestService}

ngOnInit(){

  var rxjs = this.request.getRxjsData();

  var d = rxjs.subscribe(

    (data) => {console.log(data)}

  )

  setTimeOut(() => {d.unsubscript()},1000)

}

import {Observable} from 'rxjs';

getRxjsData(){

  let steam = new Obervable(observer =>{

    setInterval(() => {

      var username = "jennifer";

      obsever.next(username);

      observer.error("失败")

    },1000);

  })

}

construct(p){public request:RequestService}

ngOnInit(){

  var rxjs = this.request.getRxjsData();

  rxjs.subscribe(

    (data) => {console.log(data)}

  )

}

import {HttpClient} from ‘@angular/common/http’;(get请求)

import

constructor(public http:HttpClient){}

var api=http://xxx;

this.http.get(api).subscribe(response =>

 {console.log(response);

});

const httpOptions = {

headers:new HttpHeaders({‘Content-type’:’application/json’})

}

var api=http://xxx/doLogin;

this.http.post(api,{username:”张三”，age:”20”},httpOptions).subscribe(

response => {console.log(response)};

);

import {HttpClient} from ‘@angular/common/http’;

constructor(public http:HttpClient){}

var api=http://xxx/doLogin;

this.http.jsonp(api,’callback’).subscribe(response =>{console.log(response)})

1.1安装

cnpm install axios --save

1.2新建服务

ng g service services/httpservice

服务中引入axios

import axios from ‘axios’

1.3服务类中使用axios

axiosGet(api){

  return new Promise((resolve,reject) => {

    axios.get(api)

.then(function(response){

resolve(response);

})

})

}

2.1引入服务类

import {HttpService} from ‘./services/httpservice.service’;

2.2注册

@NgModule({

providers:[ HttpService],

})

3.1引入服务类

import {HttpService} from ‘../../services/httpservice.service’;

3.2实例化

constructor(public httpService: HttpService,){}

3.3发出请求

var api=http://xxx/doLogin;

this. httpService. axiosGet(api).then((data) => {

  console.log(data)

})

import {HomeComponent} from ‘./home/home.component’;

import {newsComponent} from ‘./news/news.component’;

import {newsContentComponent} from ‘./newsContent/newsContent.component’;

const routes:Routes = [

 {path:’home’,component:HomeComponent},

  { path:’news’,component: newsComponent },//静态路由

  { path:’newsContent/:aid’,component: newsContentComponent },//动态路由

  {path:’**’,redirectTo:’home’}  //默认路由

]

<h1>

  <a [routerLink]=”[’/home’]”>首页</a>

  <a [routerLink]=”[’/news’]”>新闻</a>

</h1>

<router-outlet></router-outlet>

引入组件

import {HomeComponent} from ‘./home/home.component’;

import {newsComponent} from ‘./news/news.component’;

import {newsContentComponent} from ‘./newsContent/newsContent.component’;

路由配置（静态）

const routes:Routes = [

{path:’home’,component:HomeComponent},

{ path:’news’,component: newsComponent },

{ path:’newsContent’,component: newsContentComponent },

{path:’**’,redirectTo:’home’}  //默认路由

]

通过queryParams传值

<li *ngFor=”let item of list;let key =index”>

<a [routerLink]=”[‘/newsContent’]” [queryParams]=”{aid:key}”>{{item}}</a>

</li>

引入ActivityRoute

import {ActivatedRoute} from ‘@angular/router’;

声明

constructor(public route: ActivatedRoute){}

获取数据

ngOnInit(){

 this.route.queryParams.subscribe((data) => {

    console.log(data)

})

}

引入组件（同上）

路由配置（动态）

const routes:Routes = [

{path:’home’,component:HomeComponent}, //普通路由

{ path:’news’,component: newsComponent },//普通路由

{ path:’newsContent/:aid’,component: newsContentComponent }, //动态路由

path:’**’,redirectTo:’home’}

]

<li *ngFor=”let item of list;let key =index”>

<a [routerLink]=”[‘/newsContent/’,key]”>{{item}}</a>

</li>

引入ActivityRoute

import {ActivatedRoute} from ‘@angular/router’;

声明

constructor(public route:ActivitedRoute){}

获取数据

ngOnInit(){

  this.route.params.subscribe((data) => {data})

}

触发跳转

<button (click)=” goNewsContent()”></button>

接受数据组件newsContent引入ActivityRoute并声明

import {ActivatedRoute} from ‘@angular/router’;

constructor(public route: ActivatedRoute){}

ngOnInit(){

  this.route.queryParams.subscribe((data) => {

    console.log(data)

})

引入NavigationExtras

import{Router, NavigationExtras} from ‘@angular/router’

construct中初始化

constructor(public router:Router){}

执行跳转，用NavigationExtras配置传参

goNewsContent(){

//定义数据

  let msg: NavigationExtras = {

  queryParams:{‘userId’:’123’},

  fragment:’anchor’

};

this.router.navigate([‘/news’], msg)

}

触发跳转

<button (click)=”goNewsContent()”>js路由跳转(动态路由)<button>

<button (click)=”goHome ()”>js路由跳转(普通路由)<button>

接收数据的组件

import {ActivatedRoute} from ‘@angular/router’;

constructor(public route:ActivitedRoute){}

ngOnInit(){

  this.route.params.subscribe((data) => {data})

}

引入

import {Router} from ‘@angular/router’;

初始化

constructor(public router:Router){}

navigate跳转

goNewsContent(){

  this.router.navigate([‘/newsContent/’ ,’1234’])

}

goHome(){

  this.router.navigate([‘/Home’])

}

创建home的子组件news

ng g component component components/home/news

引入组件（缩进）

import {HomeComponent} from ‘./home/home.component’;

  import {newsComponent} from ‘./news/news.component’;

配置嵌套路由

const routes:Routes = [

{path:’home’,component:HomeComponent

children:[

  { path:’news’,component: newsComponent },

  {path:'**',redirectTo:'news'} //默认加载

]

]

<a [routerLink]=“['/home/welcome']">加载新闻组件</a>

<a [routerLink]=”['/home/welcome']">加载通知组件</a>

<div>

  <router-outlet></router-outlet>

</div>