1. 创建英雄服务：
修改之前创建的 hero.service.ts，以便从服务器获取英雄数据。使用 Angular 的 HttpClient 来进行 HTTP 请求。
// src/app/hero.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Hero } from './hero.model';
@Injectable({
providedIn: 'root',
})
export class HeroService {
private heroesUrl = 'https://your-api-url/heroes'; // Replace with your actual API endpoint
constructor(private http: HttpClient) {}
getHeroes(): Observable<Hero[]> {
return this.http.get<Hero[]>(this.heroesUrl);
}
getHeroById(id: number): Observable<Hero> {
const url = `${this.heroesUrl}/${id}`;
return this.http.get<Hero>(url);
}
}
在这里，我们使用了 HttpClient 来发送 HTTP 请求。确保在模块中导入 HttpClientModule 并添加到 imports 数组中。
// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // Import HttpClientModule
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule, AppRoutingModule],
bootstrap: [AppComponent],
})
export class AppModule {}
2. 在组件中使用服务：
在你的组件中（比如 app.component.ts）导入并使用修改后的 HeroService。
// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { HeroService } from './hero.service';
import { Hero } from './hero.model';
@Component({
selector: 'app-root',
template: `
<h1>Hero Tour</h1>
<ul>
<li *ngFor="let hero of heroes">{{ hero.name }}</li>
</ul>
`,
styles: [],
})
export class AppComponent implements OnInit {
heroes: Hero[] = [];
constructor(private heroService: HeroService) {}
ngOnInit(): void {
this.heroService.getHeroes().subscribe(heroes => {
this.heroes = heroes;
});
}
}
使用 subscribe 方法来订阅从服务器获取的英雄数据。
3. 运行应用：
在命令行中运行 ng serve，然后在浏览器中打开 http://localhost:4200/，你应该能够看到通过从服务器获取的英雄数据构建的列表。
确保替换 https://your-api-url/heroes 中的 URL 为实际的 API 端点。这个示例假设服务器返回一个包含英雄信息的 JSON 数组。
这就是在 Angular 项目中从服务器获取数据的基本步骤。
转载请注明出处：http://www.zyzy.cn/article/detail/5026/Angular