1. 创建服务：
在 src/app 目录下创建一个服务文件，比如 hero.service.ts。这个服务可以用于获取和管理英雄数据。
// src/app/hero.service.ts
import { Injectable } from '@angular/core';
import { Hero } from './hero.model';
@Injectable({
providedIn: 'root',
})
export class HeroService {
private heroes: Hero[] = [
{ id: 1, name: 'Hero 1' },
{ id: 2, name: 'Hero 2' },
// Add more heroes as needed
];
getHeroes(): Hero[] {
return this.heroes;
}
getHeroById(id: number): Hero | undefined {
return this.heroes.find(hero => hero.id === id);
}
}
2. 在组件中使用服务：
在你的组件中导入并使用刚刚创建的服务。例如，在 app.component.ts 中：
// src/app/app.component.ts
import { Component } from '@angular/core';
import { HeroService } from './hero.service';
@Component({
selector: 'app-root',
template: `
<h1>Hero Tour</h1>
<ul>
<li *ngFor="let hero of heroes">{{ hero.name }}</li>
</ul>
`,
styles: [],
})
export class AppComponent {
heroes: Hero[] = [];
constructor(private heroService: HeroService) {
this.heroes = heroService.getHeroes();
}
}
3. 在模块中注册服务：
在你的模块中（通常是 app.module.ts）导入并将服务添加到 providers 数组中。
// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HeroService } from './hero.service';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [HeroService], // Add your services here
bootstrap: [AppComponent],
})
export class AppModule {}
使用 providers 数组将服务注册为应用级别的依赖项，这样它就可以在整个应用中共享。
4. 运行应用：
在命令行中运行 ng serve，然后在浏览器中打开 http://localhost:4200/，你应该能够看到使用服务获取的英雄列表。
这就是在 Angular 项目中添加服务的基本步骤。服务使得应用的数据和逻辑更易于管理和共享。
转载请注明出处：http://www.zyzy.cn/article/detail/5024/Angular