1. 搭建开发环境
1.安装angular/cli => npm install @angular/cli
2. 新建angular项目 => ng new Myangular
3. 打开angular项目 => ng serve
2. 创建新组件
创建新组件:ng generate component home
3.设置属性,模拟一组数据
export interface Homesx {
id :number,
name:string,
}
import { Homesx } from './homesx/homesx';
export const HOME: Homesx[] = [
{ id: 11, name: 'Dr Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
4. 在home.component.ts中获取数据
1. 新建一个home.service,来模拟异步获取HOME数据。
ng g s home => 新建homeService
2.写一个获取Home的方法,这里要用到Observable来设置一个可观察的值,利用of来弹出一个Observable属性类型。
getHome():Observable<Homesx[]> {
const home = of(HOME)
return home
}
3.为了看到我们是否成功获取数据,可以在新建一个message.service,并且新建一个message.component来显示弹出获取成功的通知。
ng g s message ng g c message
在message中设置新增和清除方法,在message.component中显示:如果获取到数据才显示,所以要使用一个*ngIf进行判断。因为每次获取数据都会向message中添加内容,所以遍历div显示所有的获取数据。
message:string[] = []
//新增方法
add(m:string){
this.message.push(m)
}
//清除方法
clear(){
this.message = []
}
<div *ngIf="messageService.message.length">
<h2>Messages</h2>
<button (click)="messageService.clear()">Clear messages</button>
<div *ngFor='let message of messageService.message'> {{message}} </div>
</div>
4.这样我们就需要在home.service中的getHome方法中使用messageService中的add方法,将内容添加到message中。
首先要在constructor中定义一个私有的messageservice
constructor(private messageService:MessageService) { }
然后在getHOME()中使用。
this.messageService.add('获取数据')
5.现在我们的home.service和message.service都已经写完了,接下来就是要在home.component.ts中去调用这个获取数据的服务,方法如下
(1) 在构造函数中添加私有的homeService和messageService
constructor(private homeService : HomeService,private messageService:MessageService) { }
(2)写一个获取数据的方法,因为用了Observable,这里要用subscribe来获取。
getHome():void {
this.homeService.getHome().subscribe(home => this.home = home) //把传过来的home赋给原有的home数组
}
(3)在ngOnInit声明周期中调用该方法
ngOnInit(): void {
this.getHome()
}
6.这样在home中就使用了home.service这个服务,获取到了数据给了home数组。在home.html中遍历显示列表就行了。
<ul>
<li *ngFor='let h of home' >
<a routerLink="/detail/{{h.id}}"> //此处点击会跳转到home-detail组件,所以写上roterLink
<span>id:{{h.id}}</span><span>name:{{h.name}}</span>
</a>
</li>
</ul>
5. 配置路由信息
1. 现在home中已经有了数据,我们想让他点击Home时显示home.component组件,所以这时候我们需要配置路由。
//引入路由
import { RouterModule,Routes } from '@angular/router';
//引入组件HomeComponent
import { HomeComponent } from './home/home.component';
//定义路由
const routes:Routes = [
{path: '', redirectTo: '/home', pathMatch: 'full' },//设置默认路由为home
{path:'home',component:HomeComponent},
]
2.配置好路由信息后,在app.component.html中配置
<a routerLink="/home">Home</a>
6.设置home-detail
1.home-detail是我们点击home中的哪一个数据就跳转到显示对应的id和name。所以获取到点击的数据就尤为关键,通过id进行匹配。
因为我们在home.service中获取了HOME数据,所以这里我们再写一个getId()来将id匹配的内容返回出来
getId(id:number):Observable<Homesx|undefined> {
const home = HOME.find(h =>h.id === id) //通过find
this.messageService.add(`得到id${{home}}`);//当获取到数据时,发送消息
return of(home)
}
2.显然我们需要在home-detail中将所点击到的id传递给getId(),所以这里需要用到路由获取参数的方法。
//引入获取路由参数的依赖
import { ActivatedRoute } from '@angular/router';//保存路由信息,提取参数用的
import { Location } from '@angular/common'; //一个angular的服务
constructor(private acroute:ActivatedRoute,private location:Location,private homeService:HomeService) { }
getDetail():void {
const id = Number(this.acroute.snapshot.paramMap.get('id')) //得到参数的语法
this.homeService.getId(id).subscribe(h => this.home = h) //通过getId方法,得到匹配后的信息
}
3.这样我们将新的home显示在home-detail中就行了。
<div *ngIf="home">
<h2>{{home.name | uppercase}} Details</h2>
<div><span>id: </span>{{home.id}}</div>
<div>
<label for="home-name">Hero name: </label>
<input id="home-name" [(ngModel)]="home.name" placeholder="name">
</div>
</div>