一、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，所以使用subscribe
this.http.get(api).subscribe((response: any) => {
// console.log(response);
this.list = response.result
})
}
}header.component.html
扫描二维码关注公众号，回复：
15113176 查看本文章
<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，所以使用subscribe
this.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'}
})
}
}