Angular2.0—https服务

Angular2.0—https服务

1. 首先使用脚手架创建项目

友情链接：Angular2.0 —构建项目的流程以及使用ng-zorro

2. 创建组件home

友情链接：Angular2.0—路由跳转

3 .编写代码

• 创建http服务

  ng g service https
  

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';//引入http模块
import { RouterConfingModule } from './router/router.module';//引入路由
import { HttpsService } from './https.service';//引入https服务
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [HttpsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

//编写https.service.ts服务文件
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';//引入http服务模块
@Injectable({
  providedIn: 'root'
})
export class HttpsService {
  private  url:string = 'https://route.showapi.com/9-5?from=5&lat=40.242266&lng=116.2278&need3HourForcast=0&needAlarm=0&needHourData=0&needIndex=0&needMoreDay=0&showapi_appid=56337&showapi_sign=5f12cb45fa964c6fa7ddbf15fa80ece7'      
  constructor(private http:HttpClient) { }
  login(){
     return this.http.get(this.url)
  }
}

//在组件中使用http服务
import { Component } from '@angular/core';
import { HttpsService } from '../https.service';//引入服务
@Component({
  selector: 'app-zizujian',
  templateUrl: './zizujian.component.html',
  styleUrls: ['./zizujian.component.scss']
})
export class ZizujianComponent implements OnInit {
  msg;
  constructor(
    private http_ser:HttpsService,//注入服务
  ) { }
  ngOnInit() {

  }
 say(){
    this.ser.say();
      //获取服务中的方法
    this.http_ser.login().subscribe(
         (data)=>{
            console.log(data.showapi_res_body.f1)
         }
      )
  }
}