1.Angularのデータ取得リクエスト
angular5.x の後は、get、post、およびサーバーが HttpClientModule モジュールと対話します。
1. まず、app.module.tsにHttpClientModuleを導入してインジェクトします
「@angular/common/http」から {HttpClientModule} をインポートします
注入：
import：[
HttpClientModule
]2. HttpClient を使用する場所に導入し、コンストラクターで宣言します。
「@angular/common/http」から {HttpClient} をインポートします
コンストラクター（パブリック http：HttpClient）{}
3. デモ
ヘッダー.コンポーネント.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
})
}
}ヘッダー.コンポーネント.html
<button (click)="getData()">get请求</button>
<ul>
<li *ngFor="let item of list">{
{item.title}}</li>
</ul>2. Angular 投稿がデータを送信する
1. 最初のステップは、app.moudle.ts に HttpClientModule を導入して挿入する get 操作の最初のステップと同じです。
2. HttpClient、HttpHeaders を使用する場所に導入し、コンストラクターで HttpClient を宣言します。
「@angular/common/http」から { HttpClient,HttpHeaders } をインポートします
3. コードデモ
ヘッダー.コンポーネント.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);
})
}
}ヘッダー.コンポーネント.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 に導入し、注入します。
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);
})
}
}4. axiosの使用
1. Service を作成し、app.moudle.ts にインポートし、request.service.ts に axios をカプセル化します。もちろん、カプセル化せずに axios をコンポーネントに直接インポートすることもできます
2.axiosをインストールする
npm i axios --save
3. axios が使用される場所に導入する
「axios」から 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);
})
})
}
}ヘッダー.コンポーネント.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);
})
}
}ヘッダー.コンポーネント.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. 動的値転送のルーティング
①合格値を取得する
ヘッダー.コンポーネント.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>ヘッダー.コンポーネント.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}条数据`)
}
}
}
渡されたパラメータを取得する方法
フッター.コンポーネント.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 },ヘッダー.コンポーネント.html
<p>header组件</p>
<ul>
<li *ngFor="let item of list;let key=index">
<!-- key是动态路由 -->
<a [routerLink]="[ '/footer',key ]">{
{key}}--{
{item}}</a>
</li>
</ul>フッター.コンポーネント.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'}
})
}
}