1. 创建英雄模型：
在你的 Angular 项目中创建一个英雄模型。在 src/app 目录下创建一个 hero.model.ts 文件，并定义一个简单的 Hero 类。例如：
// src/app/hero.model.ts
export class Hero {
id: number;
name: string;
}
2. 创建英雄服务：
创建一个服务，用于处理英雄数据的获取和更新。在 src/app 目录下创建一个 hero.service.ts 文件，并定义一个简单的 HeroService 类。这里我们可以使用一个硬编码的英雄数组来模拟数据。实际应用中，你可能会从后端 API 中获取数据。
// 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);
}
}
3. 创建英雄编辑器组件：
在 src/app 目录下创建一个 hero-edit 组件。在这个组件中，你可以使用 Angular 表单来编辑英雄的名称。这里使用了 Angular 的 FormsModule，所以确保你的模块中已经导入了 FormsModule。
// src/app/hero-edit/hero-edit.component.ts
import { Component, Input } from '@angular/core';
import { Hero } from '../hero.model';
@Component({
selector: 'app-hero-edit',
template: `
<div *ngIf="hero">
<h2>Edit Hero</h2>
<label for="heroName">Hero Name:</label>
<input id="heroName" [(ngModel)]="hero.name" />
</div>
`,
styles: [],
})
export class HeroEditComponent {
@Input() hero?: Hero;
}
4. 在父组件中使用英雄编辑器：
在你的父组件（比如 app.component.ts）中使用 app-hero-edit 组件，并将选定的英雄传递给它。
// src/app/app.component.ts
import { Component } from '@angular/core';
import { Hero } from './hero.model';
import { HeroService } from './hero.service';
@Component({
selector: 'app-root',
template: `
<h1>Hero Editor</h1>
<div *ngFor="let hero of heroes">
<app-hero-edit [hero]="hero"></app-hero-edit>
</div>
`,
styles: [],
})
export class AppComponent {
heroes: Hero[] = [];
constructor(private heroService: HeroService) {
this.heroes = heroService.getHeroes();
}
}
5. 添加路由：
如果你想在不同的页面中编辑英雄，你可能需要使用 Angular 路由。在 app-routing.module.ts 中定义路由，并确保在 app.module.ts 中导入 RouterModule。
// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
const routes: Routes = [
{ path: '', component: AppComponent },
// Add more routes as needed
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
在 app.module.ts 中：
// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroEditComponent } from './hero-edit/hero-edit.component';
@NgModule({
declarations: [AppComponent, HeroEditComponent],
imports: [BrowserModule, FormsModule, AppRoutingModule],
bootstrap: [AppComponent],
})
export class AppModule {}
这样，你就可以通过路由在不同的页面中编辑英雄。
请注意，这只是一个简单的示例，实际应用中可能需要更复杂的逻辑和组织。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5021/Angular