案例无人点餐系统
1.创建home，pconent组件
ng g component components/home
ng g component components/pconent
1
2
2
2.配置路由
import { HomeComponent } from './components/home/home.component';
import { PconentComponent } from './components/pconent/pconent.component';
const routes: Routes = [
{path: 'home',component:HomeComponent},
{path: 'pconent/:id',component:PconentComponent},
{path: '**',redirectTo: 'home'}
];
1
2
3
4
5
6
7
2
3
4
5
6
7
3.创建,引用并封装http服务
ng g service services/common/httpClinet
//app.module.ts
import { HttpClientModule } from "@angular/common/http";
import { HttpClinetService } from "./services/common/http-clinet.service";
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
],
providers: [HttpClinetService],
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
//http-clinet.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
@Injectable({
providedIn: 'root'
})
export class HttpClinetService {
//公共api
public Host:string= 'http://a.itying.com/'
constructor(public http:HttpClient) { }
/*
api/productlist
http://a.itying.com/api/productlist
*/
get(api) {
return new Promise((resolve,reject) => {
this.http.get(this.Host + api).subscribe((response)=> {
resolve(response)
})
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
4.调用接口请求数据并写入页面
<!-- home.component.html -->
<div class="content">
<div class="item" *ngFor="let item of list">
<h3 class="item_cate">{{item.title}}</h3>
<ul class="item_list">
<li *ngFor="let food of item.list">
<div class="inner">
<a [routerLink]="[ '/pconent', food._id ]">
<img [src]="imgUrl+food.img_url" />
<p class="title">{{food.title}}</p>
<p class="price">¥{{food.price}}</p>
</a>
</div>
</li>
</ul>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//home.component.ts
import { HttpClinetService } from "../../services/common/http-clinet.service";
public imgUrl:string = ''
public list:any[]=[]
constructor(public http:HttpClinetService) {
this.imgUrl = this.http.Host
}
ngOnInit() {
this.http.get('api/productlist').then((res:any)=> {
console.log(res)
this.list=res.result;
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
5.点击商品跳转详情页面,获取路由id，请求数据
<!-- pconent.component.html -->
<div class="back">
<a [routerLink]="[ '/home' ]">返回</a>
</div>
<div class="p_content">
<div class="p_info">
<img [src]="imgUrl+conent.img_url" />
<h2>{{conent.title}}</h2>
<p class="price">{{conent.price}}/份</p>
</div>
<div class="p_detial">
<h3>
商品详情
</h3>
<div class="p_content" [innerHtml]='conent.content'>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//pconent.component.ts
import { ActivatedRoute } from "@angular/router";
import { HttpClinetService } from "../../services/common/http-clinet.service";
public imgUrl: string = ''
public conent:any[] = []
constructor(public route: ActivatedRoute, public http: HttpClinetService) {
this.imgUrl = this.http.Host
}
ngOnInit() {
this.route.params.subscribe((val: any) => {
console.log(val)
this.getConent(val.id);
})
}
getConent(id) {
this.http.get('api/productcontent?id=' + id).then((res: any) => {
console.log(res.result[0])
this.conent = res.result[0];
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21