一文带你入门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'}})}
}