一文带你入门angular（下）
一、angular get数据请求
angular5.x之后get，post和服务器交互使用的是HttpClientModule模块。
1.首先要在app.module.ts中引入HttpClientModule并注入
import {HttpClientModule} from "@angular/common/http"
注入：
import：[
HttpClientModule
]2.在用到的地方引入HttpClient并在构造函数声明
import {HttpClient} from "@angular/common/http"
constructor（public http：HttpClient）{}
3.演示
header.component.ts
import { Component } from '@angular/core';
//引入
import { HttpClient } from "@angular/common/http"
@Component({selector: 'app-header',templateUrl: './header.component.html',styleUrls: ['./header.component.scss']
})
export class HeaderComponent {public list: any[] = []constructor(public http: HttpClient) {}ngOnInit() {}getData() {//服务器必须允许跨域let api = "http://a.itying.com/api/productlist"//因为angular底层封装请求的时候用的rejx，所以使用subscribethis.http.get(api).subscribe((response: any) => {// console.log(response);this.list = response.result})}
}header.component.html
<button (click)="getData()">get请求</button>
<ul><li *ngFor="let item of list">{{item.title}}</li>
</ul>二、angular post提交数据
1.第一步同get操作的第一步一样引入注入HttpClientModule在app.moudle.ts
2.在用到的地方引入HttpClient，HttpHeaders并在构造函数中声明HttpClient
import { HttpClient,HttpHeaders } from "@angular/common/http"
3.代码演示
header.component.ts
import { Component } from '@angular/core';
//引入
import { HttpClient, HttpHeaders } from "@angular/common/http"
@Component({selector: 'app-header',templateUrl: './header.component.html',styleUrls: ['./header.component.scss']
})
export class HeaderComponent {public list: any[] = []constructor(public http: HttpClient) {}ngOnInit() {}getData() {//服务器必须允许跨域let api = "http://a.itying.com/api/productlist"//因为angular底层封装请求的时候用的rejx，所以使用subscribethis.http.get(api).subscribe((response: any) => {// console.log(response);this.list = response.result})}sendData() {//服务器必须允许跨域//手动设置请求类型const httpOptions = { headers: new HttpHeaders({ "Content-Type": "application/json" }) }let api = "http://127.0.0.1:3000/dologin"this.http.post(api, { "username": "zs", "age": 20 }, httpOptions).subscribe((response) => {console.log(response);})}
}header.component.html
<button (click)="getData()">get请求</button>
<button (click)="sendData()">post请求</button>
<ul><li *ngFor="let item of list">{{item.title}}</li>
</ul>三、angular jsonp获取跨域数据
1.在app.moudle.ts中引入HttpClientMoudle,HttpClientJsonpModule并注入
import { HttpClientModule, HttpClientJsonpModule } from "@angular/common/http"
2.在用到的地方引入HttpClient并在构造函数声明
3.代码演示
import { Component } from '@angular/core';
//引入
import { HttpClient, HttpHeaders } from "@angular/common/http"
@Component({selector: 'app-header',templateUrl: './header.component.html',styleUrls: ['./header.component.scss']
})
export class HeaderComponent {public list: any[] = []constructor(public http: HttpClient) {}ngOnInit() {}getJsonp() {//jsonp请求，服务器必须得支持，不支持可以让后端调一下// http://a.itying.com/api/productlist的后面加上？callback=xxx在浏览器地址栏打开，改变xxx看数据变化，// 可以显示在地址中就能就受let api = "http://a.itying.com/api/productlist"this.http.jsonp(api, "callback").subscribe((res) => {console.log(res);})}
}四、axios使用
1.建立一个service服务，引入到app.moudle.ts并在request.service.ts里封装axios，当然也可不用封装直接在组件引入axios
2.安装axios
npm i axios --save
3.用到的地方引入axios
import axios from 'axios';
4.代码演示
request.service.ts
import { Injectable } from '@angular/core';
import axios from 'axios';
@Injectable({providedIn: 'root'
})
export class RequestService {constructor() { }getAxios(api: any) {return new Promise((res, err) => {axios.get(api).then((res) => {console.log(res);}).catch(err => {console.log(err);})})}
}header.component.ts
import { Component } from '@angular/core';
//引入
import { HttpClient, HttpHeaders } from "@angular/common/http"
//引入服务
import { RequestService } from 'src/app/services/request.service';
@Component({selector: 'app-header',templateUrl: './header.component.html',styleUrls: ['./header.component.scss']
})
export class HeaderComponent {public list: any[] = []constructor(public http: HttpClient, public requestService: RequestService) {}ngOnInit() {}getAxios() {let api = "http://a.itying.com/api/productlist"this.requestService.getAxios(api).then(data => {console.log(data);})}
}header.component.html
<button (click)="getAxios()">axios获取数据</button>五、路由
1.安装路由指令
--flat 把这个文件放进了 src/app 中，而不是单独的目录中。--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。
ng generate module app-routing --flat --module=app
2.使用路由
找到app-routing.moudle.ts文件
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 引入组件
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { FatherComponent } from './components/father/father.component';
import { ChildComponent } from './components/child/child.component';
const routes: Routes = [{ path: "header", component: HeaderComponent },{ path: "footer", component: FooterComponent },{ path: "father/:id", component: FatherComponent },{ path: "child", component: ChildComponent },//匹配不到路由的时候跳转的路由{ path: "**", redirectTo: "header" },
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }在app.component.html
<h1>我是app根组件</h1>
<!--routerLinkActive="active"点击当前高亮显示 在scss定义.active颜色 -->
<a [routerLink]="[ '/header']" routerLinkActive="active">去header组件</a>
<a [routerLink]="[ '/footer']" routerLinkActive="active">去footer组件</a>
<a [routerLink]="[ '/father',123]" routerLinkActive="active">去father组件</a>
<a [routerLink]="[ '/child']" routerLinkActive="active">去child组件</a>
<!-- 路由出口类似于vue router-view -->
<router-outlet></router-outlet>3.路由动态传值
①get传值
header.component.html
<p>header组件</p>
<ul><li *ngFor="let item of list;let key=index"><!-- get传值[queryParams]="{id:key}" --><a [routerLink]="[ '/footer' ]" [queryParams]="{id:key,name:'zs'}">{{key}}--{{item}}</a></li>
</ul>header.component.ts
import { Component } from '@angular/core';@Component({selector: 'app-header',templateUrl: './header.component.html',styleUrls: ['./header.component.scss']
})
export class HeaderComponent {public list: any[] = []ngOnInit(): void {for(var i = 0; i <= 5; i++) {this.list.push( `这是第${i}条数据`)} }}
如何获得传递的参数
footer.component.ts
import { Component } from '@angular/core';
//如何获取路由传的值，先引入ActivatedRoute
import { ActivatedRoute } from '@angular/router';
@Component({selector: 'app-footer',templateUrl: './footer.component.html',styleUrls: ['./footer.component.scss']
})export class FooterComponent {constructor(public route: ActivatedRoute) {}ngOnInit(): void {// 这样拿取不到，会报错// console.log(this.route.queryParams.value);this.route.queryParams.subscribe(data => {console.log(data);//{id: '4', name: 'zs'}})}
}②动态传值
首先路由表里面
{ path: "footer/:id", component: FooterComponent },header.component.html
<p>header组件</p>
<ul><li *ngFor="let item of list;let key=index"><!-- key是动态路由 --><a [routerLink]="[ '/footer',key ]">{{key}}--{{item}}</a></li>
</ul>footer.component.ts
import { Component } from '@angular/core';
//如何获取路由传的值，先引入ActivatedRoute
import { ActivatedRoute } from '@angular/router';
@Component({selector: 'app-footer',templateUrl: './footer.component.html',styleUrls: ['./footer.component.scss']
})export class FooterComponent {constructor(public route: ActivatedRoute) {}ngOnInit(): void {this.route.params.subscribe(data => {console.log(data);//{id: '5'}})}
}