AngularJS2.0 学习笔记05:多组件的引用(在线算命App 单击解签)

2016年09月13日 APP开发, javascript 暂无评论 阅读 23 views 次

以前的章节,签文和解签都放在一起,没有神秘气息。所以这一章要用多个组件,再把这两个分离一下。

 

在04讲的中,在AppComponenttemplate中定义了hero的list和detail,现在我们把hero的detail部分提取出来作为一个组件来使用。 首先我们定义一个新的组件,在app目录下面新建一个文件 hero-detail.component.ts。文件内容为:

import {Component} from 'angular2/core';
@Component({
  selector: 'my-hero-detail',
})
export class HeroDetailComponent {
}

至此,我们新定义了一个组件HeroDetailComponent 这个组件我们用来显示 hero的detail内容。

至此,我们新定义了一个组件HeroDetailComponent 这个组件我们用来显示 hero的detail内容。

组件命名规范

  • 所有的组件名字以Component结尾。
  • 文件名全部是小写,并且多个单词用短线连接-。例如:hero-detail.component.ts
  • 文件名字尽量与组件名称相符。

上面的HeroDetailComponent 组件,我们以后就可以使用<my-hero-detail> (组件属性selector中定义了标签名称)元素来使用这个组件。

AppComponent中关于hero的detail部分移到HeroDetailComponent组件中。在HeroDetailComponent组件中添加template内容:

import {Component} from 'angular2/core';

import {Hero} from './hero';

@Component({
selector: 'my-hero-detail',
template: `
<div *ngIf="hero">
<h2>{{hero.name}} 解签</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
<em>{{hero.desc}}</em>
</div>
</div>

`,
inputs: ['hero']
})
export class HeroDetailComponent {
public hero: Hero;
}

 

Angular2.0提供了对象的单独定义。新建一个文件hero.ts,然后在文件中写入关于Hero的定义 内容如下:

export interface Hero {
 id: number;
 name: string;
 desc:string;
}

在其他组件中需要使用Hero时我们可以这样引入:

import {Hero} from './hero';

如果其他组件有调用Hero时,引入时最好写在其他组件引入的前面。

我们希望在HeroDetailComponent组件中,hero是一个输入参数,我们需要在调用组件时,传人一个值给hero。 例如如下的代码:

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

我们给hero参数传人一个值:selectedHero。 然而我们需要在HeroDetailComponent组件@Component 数据元素中定义一个inputs数组变量

inputs: ['hero']

AppComponent中使用HeroDetailComponent组件时,需要引入HeroDetailComponent组件,并且需要在 @Component中告诉Angular我们需要的指令directives: [HeroDetailComponent]

最后重新组织一下AppComponent组件、HeroDetailComponent组件和Hero对象的内容。

export interface Hero {
id: number;
name: string;
desc:string;
}

 

AppComponent组件  

import {Component} from 'angular2/core';
import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail.component';

@Component({
selector: 'my-app',
template: `
<h4>{{title}}</h4>
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
<h2>可选列表</h2>

<ul class="heroes">
<li *ngFor="#hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
`,
styles:[`
.heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
.heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
.heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
.heroes .badge {
font-size: small;
color: white;
padding: 0.1rem 0.7em;
background-color: #369;
line-height: 1rem;
position: relative;
left: -1px;
top: -1px;
}
em{
font-size:0.8rem;}
.selected { background-color: #EEE; color: #369; }
`],
directives: [HeroDetailComponent]
})
export class AppComponent {
public title = '抽签算卦';
public hero: Hero = {
id: 1,
name: '吕氏灵签',
desc:'仅为娱乐,无其它参考意义'
};
public heroes = HEROES;

public selectedHero: Hero;
onSelect(hero: Hero) { this.selectedHero = hero; }
}
var HEROES: Hero[] = [
{id: 1,
name: '上上',
desc:'大吉大利,百事顺遂,赶紧去买彩票'},
{id: 2,
name: '上吉',
desc:'天时、地利又人和,家庭和睦,身体健康,会朋友喝酒吧'},
{id: 3,
name: '中吉',
desc:'苦尽甘来,风雨之后见彩虹,要转好运了'},
{id: 4,
name: '中平',
desc:'黎明前的曙光。寓象中不是“怀才不遇”,而是“怀才待遇”。多嘱求者“一动不若一静”。无大喜亦无大悲。在这五种签意中,最欣赏的还是中平签,因为它更符合百姓,贴近生活。其不似“上上”般如中头彩;不似“上吉”般天时、地利又人和;不似“中吉”般起起落落,如咖啡加糖;“中平”更多的是人们常求的“平平”和“淡淡”。'},
{id: 5,
name: '下下',
desc:'凶多吉少.否极泰来,物极必反,再熬一熬就过去了。要不再抽一签?'}

] ;

三个文件打包地址:

app

 

运行效果

2016-09-13_173045

2016-09-13_173045

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: