angular学习003英雄编辑器

参考来源：https://www.angular.cn/tutorial/toh-pt1

1、新建组件src\app\heroes\heroes.component.ts

import { Component, OnInit } from '@angular/core';
import {Hero} from '../hero';

@Component({
  selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: []
})

export class HeroesComponent implements OnInit {

  hero:Hero = {
    id: 1,
    name: 'Widstorm'
  };

  constructor(){}

  ngOnInit(){}

}

2、编写组件模板src\app\heroes\heroes.component.html

<h2> {{ hero.name | uppercase }} Details</h2>
<div><span>id:</span>{{hero.id}}</div>
<div>
  <label>name:
    <input [(ngModel)]="hero.name" placeholder="name">
  </label>
</div>

3、编写英雄实体src\app\hero.ts

export class Hero {
  id: number;
  name: string;
}

4、根模块中引用组件src\app\app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';

import {AppComponent} from './app.component';
import {HeroesComponent} from './heroes/heroes.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

5、根模板中添加选择器，类似java中的自定义标签app\app.component.html

<h1>{{title}}</h1>
<app-heroes></app-heroes>