为本地开发搭建环境(英雄编辑器)

一:下载并安装环境
1.下载范例hero到本地;
2.安装依赖包:npm install
3.保持应用不断转译和运行:npm start

二:笔记整理

1.@Component装饰器中指定的模板template,为这些新属性建立数据绑定,(还可以包括style,属性,方法)。
2.一个组件中最好只有一个类,建立单独的ts文件导入导出.(组件里面的叫属性)
3.建立数据:
(后期采用Web服务获取数据,初期可以模拟数据进行实验)
4. ngFor 来显示英雄列表;(循环)

. <li *ngFor="let hero of heroes">
      <span class="badge">{{hero.id}}      </span> {{hero.name}}
  </li>

5.为选中列表加一个样式:
[class.selected]="hero === selectedHero"
意思是:当表达式(hero === selectedHero)为true时,Angular会添加一个CSS类selected。为false时则会移除selected类。
6.点击事件:(click)=”onSelect(hero)”
7.ng-if:虽然我们要在模板中显示的是selectedHero.name,但在选中了一个英雄之前,我们必须让这些英雄详情留在DOM之外。

我们可以把模板中的英雄详情内容区放在一个

中。 然后,添加一个ngIf内置指令,把ngIf的值设置为组件的selectedHero属性。
<div *ngIf="selectedHero">...</div>
8.多个组件协同工作:
(1)文件名和组件名遵循风格指南中的标准方式。

a.组件的类名应该是大驼峰形式,并且以Component结尾。 因此英雄详情组件的类名是HeroDetailComponent。

b.组件的文件名应该是小写中线形式,每个单词之间用中线分隔,并且以.component.ts结尾。 因此HeroDetailComponent类应该放在hero-detail.component.ts文件中。

(2)定义一个组件,我们总是要先导入符号Component.
@Component装饰器为组件提供了Angular元数据。 CSS选择器的名字hero-detail会匹配元素的标签名,用于在父组件的模板中标记出当前组件的位置。
@Component({
selector: 'hero-detail',
template:

…….

})

(3)输入属性:@Input

<hero-detail [hero]="selectedHero"></hero-detail>

意思是:在等号的左边,是方括号围绕的hero属性,这表示它是属性绑定表达式的目标。 我们要绑定到的目标属性必须是一个输入属性,否则Angular会拒绝绑定,并抛出一个错误。

解决错误:
a.修改@angular/core导入语句,使其包含符号Input。
import { Component, Input } from '@angular/core';

b.通过在hero属性前面加上@Input装饰器,来表明它是一个输入属性
@Input() hero: Hero;()

hero属性通过@input输入属性接收一个英雄对象,然后将属性绑定到自己的模板中。

template: `
    <div *ngIf="hero">
      ....
    </div>
  `

(4).每个组件都必须在一个(且只有一个)angualr模块module中声明。
a.在模块中导入子组件:

import { HeroDetailComponent } from './hero-detail.component';

b.添加到声明数组中:

declarations: [
  ...,
  HeroDetailComponent
],

declarations数组中包含应用中属于该模块的组件、管道和指令的列表。
组件component在被其他组件引用之前必须在一个模块module中声明过。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值