1. Угловой запрос данных
После angular5.x get, post и сервер взаимодействуют с модулем HttpClientModule.
1. Сначала введите HttpClientModule в app.module.ts и внедрите его
импортировать {HttpClientModule} из "@angular/common/http"
впрыск:
import：[
HttpClientModule
]2. Введите HttpClient там, где он используется, и объявите его в конструкторе.
импортировать {HttpClient} из "@angular/common/http"
конструктор (общедоступный 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
<button (click)="getData()">get请求</button>
<ul>
<li *ngFor="let item of list">{
{item.title}}</li>
</ul>2. Угловой пост отправляет данные
1. Первый шаг аналогичен первому шагу операции get, чтобы ввести и внедрить HttpClientModule в app.moudle.ts.
2. Введите HttpClient, HttpHeaders, где они используются, и объявите HttpClient в конструкторе.
импортировать {HttpClient,HttpHeaders} из "@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>3. Angular jsonp получает междоменные данные
1. Введите HttpClientMoudle и HttpClientJsonpModule в app.moudle.ts и внедрите их
импортировать {HttpClientModule, HttpClientJsonpModule} из "@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);
})
}
}4. Использование аксиом
1. Создать сервис-сервис, импортировать его в app.moudle.ts и инкапсулировать аксиомы в request.service.ts, конечно можно напрямую импортировать аксиомы в компонент без инкапсуляции
2. Установите аксиомы
npm i axios --save
3. Введите аксиомы там, где они используются
импортировать аксиомы из '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>5. Маршрутизация
1. Установите инструкции по маршрутизации
--flat Поместите этот файл в src/app , а не в отдельный каталог. --module=app Указывает CLI зарегистрировать его AppModule в imports массиве.
ng сгенерировать модуль 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. Маршрутизация передачи динамических значений
① получить проходное значение
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}条数据`)
}
}
}
Как получить переданные параметры
нижний колонтитул.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>нижний колонтитул.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'}
})
}
}