Angular2.0—https服务
- 首先使用脚手架创建项目
友情链接：Angular2.0 —构建项目的流程以及使用ng-zorro
- 创建组件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)
}
)
}
}
