今天完成的事情：
学习练习angular官网的英雄之旅
创建列表组件
ng generate component heroes
添加属性
hero = 'Windstorm';
创建 Hero 类：创建一个hero.ts文件
export interface Hero {
id: number;
name: string;
}
显示 hero 对象：在heroes.component.html中
<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>
UppercasePipe 进行格式化
<h2>{{hero.name | uppercase}} Details</h2>
双向绑定：在heroes.component.html 中使用ngModel
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name"/>
</label>
</div>
使用[(ngModel)]后缺少 FormsModule，
在app.module.ts中
导入 FormsModule
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
imports: [
BrowserModule,
FormsModule
],
声明 HeroesComponent：app.module.ts中导入
import { HeroesComponent } from './heroes/heroes.component';
declarations: [
AppComponent,
HeroesComponent
],
显示英雄列表
创建一个名叫 mock-heroes.ts 的文件
import { Hero } from './hero';
export const HEROES: Hero[] = [
{ id: 11, name: 'Dr Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
];
显示hero；在heroes.component.ts中
import { HEROES } from '../mock-heroes';
export class HeroesComponent implements OnInit {
heroes = HEROES;
}
*ngFor 列出列表
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
添加 click 事件：修改heroes.component.html中的li
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
创建特性组件：
制作 HeroDetailComponent
生成新文件
ng generate component hero-detail
编写模板：替换heroes.component.html中的hero
<div *ngIf="hero">
<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name"/>
</label>
</div>
</div>
添加 @Input() hero 属性:在新文件hero-detail.component.ts中添加
import { Hero } from '../hero';
import { Component, OnInit, Input } from '@angular/core';
@Input() hero: Hero;
问题：
严格模式是什么，有什么用
目前全部是抄写的代码，有部分不是太理解
明天的计划：
按照angular官网的格式自己写例子
返回列表
评论