Angular学习笔记03(服务,发送网络请求)

服务

类似于vue中的vuex,全局数据共享

<!-- angular会自动实例化 标签对应的组件 -->
<!-- 
  angualr在初始化组件时候,会自动分析组件的构造方法,查看构造组件需要什么东西
  例如此处,检测到zujianchuancan01需要NameServie类型的变量
  则系统就会自动化初始一个此类型的变量给组件使用
 -->
<app-zujianchuancan01></app-zujianchuancan01>
<app-zujianchuancan02></app-zujianchuancan02>
<!-- 
  命令行：
  ng g s 服务名
  例如：ng g s name //管理名字的服务
 -->

比如声明ng g s name服务

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class NameService {
  names = ['亮亮','然然','东东']
  constructor() { }
}

需要用到的name服务里面names数组的组件,下面有语法糖的写法,更为简洁

import { Component, OnInit } from '@angular/core';
import { NameService } from '../name.service';

@Component({
  selector: 'app-zujianchuancan01',
  templateUrl: './zujianchuancan01.component.html',
  styleUrls: ['./zujianchuancan01.component.css']
})
export class Zujianchuancan01Component implements OnInit {
  // angular的服务机制就是依赖注入
  // 生命依赖:要向初始化当前组件,必须传入一个NameService变量
  // 声明属性,来保存传入的服务
  //:类型,写了类型有代码提示
  names:NameService;
  constructor(nameS:NameService) {
    this.names = nameS
  }

  ngOnInit(): void {
  }

}
/*
  依赖注入
*/
class Demo{
  name:string;
  constructor(name:string){
    this.name = name
  }
}
new Demo('string')

获取names服务数据的语法糖写法

import { Component, OnInit } from '@angular/core';
import { NameService } from '../name.service';

@Component({
  selector: 'app-zujianchuancan01',
  templateUrl: './zujianchuancan01.component.html',
  styleUrls: ['./zujianchuancan01.component.css']
})
export class Zujianchuancan01Component implements OnInit {
  // 语法糖写法
  constructor(public names:NameService){
  }

  ngOnInit(): void {
  }

}

发送网络请求

get请求

angular自带网络模块,可以更快的完成网络请求

在app.module.ts文件中引入HttpClientModule模块

// 网络模块
import { HttpClientModule} from '@angular/common/http'

 // 注入模块
  imports: [
    BrowserModule,FormsModule,HttpClientModule
  ],

需要请求数据页面的ts文件

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { NameService } from '../name.service';

@Component({
  selector: 'app-wangluo',
  templateUrl: './wangluo.component.html',
  styleUrls: ['./wangluo.component.css']
})
export class WangluoComponent implements OnInit {
  // 服务需要通过 依赖注入机制来进行加载
  // 构造方法中声明依赖:声明属性,必须要是HttpClient类型的的
  // 注入:系统在实例化组件时,就是自动传入HttpClient类型的变量
  res:any;
  constructor(public http:HttpClient) { 
  }
  // 组件内容开始初始化生命周期
  ngOnInit(): void {
    let url = 'http://www.codeboy.com:9999/data/product/list.php'
    //vue中axios发送请求:axios.get(url).then(res => {console.log(res)})
    //subscribe:订阅,订阅请求的返回值,和then相同
    this.http.get(url).subscribe((res)=>{
      console.log(res)
      this.res = res
    })
  }
}
// 自定义数据类型,这样有代码提示
interface Result{
 //等价于data:Array<ResultData>
 data: ResultData[]//数组类型,其中的元素是ResultData类型的对象
 pageCount: number,
 pageSize: number,
 pno: number,
 recordCount: number,
}

interface ResultData{
is_onsale: number,
lid: string,
pic: string,
price: string,
sold_count: string,
title: string
}

请求网络数据的html文件

<p>wangluo works!</p>
<!-- 
    能够显示 
    但是会报 Cannot read properties of undefined (reading 'pageCount')错误
    网络请求是异步的,请求没完成的时候是没有值的 res是undefined
-->
<!-- 有效的的解决方法,在使用网络请求的数据之前,先判断是否存在,再使用 -->
<div *ngIf="res">
  <div *ngFor="let item of res.data">{{ item.title }}</div>
  <p>总页数:{{ res.pageCount }}</p>
</div>

post请求

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-post-qq',
  templateUrl: './post-qq.component.html',
  styleUrls: ['./post-qq.component.css']
})
export class PostQQComponent implements OnInit {
  res:any//不推荐使用any
  constructor(public http:HttpClient) { 
  }

  ngOnInit(): void {
          // post(url,body,options):有三个参数
          let url = 'http://www.codeboy.com:9999/data/product/add.php'
          let body = 'pn0=1'
          let options = {
          headers:new HttpHeaders({
              'content-type':'application/x-www-form-urlencoded',//此设置是默认值
              //有的服务器要求:application/json
            })
          }
          this.http.post(url,body,options).subscribe((res:any) =>{
            console.log(res)
            this.res = res
          })
  }

}