Angular2.x-主/细节组件

此刻，HeroesComponent显示heroes列表和所选heroes的详细信息。

随着应用程序的增长保持一个组件中的所有功能将不可维护。您需要将大型组件分成更小的子组件，每个组件都专注于特定的任务或工作流程。

在此页面中，您将通过将heroes详细信息移动到单独的可重复使用的位置来朝此方向迈出第一步HeroDetailsComponent。

该HeroesComponent会目前唯一的heroes名单。该HeroDetailsComponent会提出一个选择heroes的细节。

9.X-使`HeroDetailComponent`

使用Angular CLI生成一个名为的新组件hero-detail(组件一般在app目录下生产)。

ng generate component hero-detail

该命令脚手架HeroDetailComponent文件并声明组件AppModule。

每次创建组件，都会声明到app.module.ts

9.1-编写模板

从HeroesComponent模板底部剪下heroes细节的HTML ，并将其粘贴到模板中生成的样板上HeroDetailComponent。

粘贴的HTML指的是一个selectedHero。新的HeroDetailComponent可以呈现任何heroes，而不仅仅是一个选定的heroes。因此，在模板中的任何地方都将“selectedHero”替换为“hero”。

完成后，HeroDetailComponent模板应该如下所示：

herodetail.component.html

<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>

9.2-添加heroes属性`@Input()`

该HeroDetailComponent模板绑定到组件的hero属性，它是类型Hero。

打开HeroDetailComponent类文件并导入Hero符号。

src / app / hero-detail / hero-detail.component.ts（导入heroes）

import { Hero } from '../hero';

该hero属性必须是一个Input属性，用装饰器注释，因为外部将像这样绑定到它。@Input() HeroesComponent

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

修改@angular/core进口声明以包含Input符号。

src / app / hero-detail / hero-detail.component.ts（导入输入）

import { Component, OnInit, Input } from '@angular/core';

添加一个hero属性，在装饰器之前。@Input()

@Input() hero: Hero;

这是你应该对HeroDetailComponent班上唯一的改变。没有更多的属性。没有表示逻辑。该组件仅通过其hero属性接收heroes对象并显示它。

9.3-显示`HeroDetailComponent`

这HeroesComponent仍然是主/细节视图。

它用于在切割模板的该部分之前自行显示heroes详细信息。现在它将委托给HeroDetailComponent。

这两个组件将具有父母/子女关系。父母HeroesComponent将HeroDetailComponent 通过发送一个新的heroes来控制孩子，以便在用户从列表中选择heroes时显示。

你不会改变HeroesComponent 班级，但你会改变它的模板。

更新`HeroesComponent`模板

该HeroDetailComponent选择是'app-hero-detail'。<app-hero-detail>在HeroesComponent模板底部附近添加一个元素，其中heroes细节视图曾经是。

像这样绑定HeroesComponent.selectedHero元素的hero属性。

heroes.component.html（HeroDetail绑定）

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

[hero]="selectedHero"是一个Angular 属性绑定。

这是一个单向的数据从绑定selectedHero的属性HeroesComponent的hero目标元素，它映射到的财产hero的性质HeroDetailComponent。

现在，当用户点击列表中的heroes时，selectedHero就会发生变化。当selectedHero更改时，属性绑定更新hero 并HeroDetailComponent显示新的heroes。

修改后的HeroesComponent模板应该如下所示：

<h2>My Heroes</h2>

<ul class="heroes">

  <li *ngFor="let hero of heroes"

    [class.selected]="hero === selectedHero"

    (click)="onSelect(hero)">

    <span class="badge">{{hero.id}}</span> {{hero.name}}

  </li>

</ul>

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

浏览器刷新并且应用程序重新开始工作，就像以前一样。

什么改变？

和以前一样，只要用户点击heroes名字，heroes详情就会出现在heroes列表下方。现在HeroDetailComponent是呈现这些细节，而不是HeroesComponent。

将原件重构HeroesComponent为两个组件，现在和未来都会带来好处：

你HeroesComponent通过减少责任来简化它。
你可以演变HeroDetailComponent成一个丰富的heroes编辑器，而无需触摸父母HeroesComponent。
你可以在HeroesComponent不触及heroes细节视图的情况下进化。
您可以重新使用HeroDetailComponent未来组件的模板。

src/app/hero-detail.component.html

<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>

src/app/herodetail.component.ts

import { Component, OnInit, Input } from '@angular/core';

import { Hero } from '../hero';

@Component({

  selector: 'app-hero-detail',

  templateUrl: './hero-detail.component.html',

  styleUrls: ['./hero-detail.component.css']

})

export class HeroDetailComponent implements OnInit {

  @Input() hero: Hero;

  constructor() { }

  ngOnInit() {

  }

}

src/app/heroes/heroes.component.html

<h2>My Heroes</h2>

<ul class="heroes">

  <li *ngFor="let hero of heroes"

    [class.selected]="hero === selectedHero"

    (click)="onSelect(hero)">

    <span class="badge">{{hero.id}}</span> {{hero.name}}

  </li>

</ul>

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

如果需要看出区别，源码如下：

Angualr2.x-列表

 --------------------------------------------------------------------------

 //heroes.component.ts

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

 import { Hero } from '../hero';

 import { HEROES } from '../mock-heroes';

 @Component({

   selector: 'app-heroes',

   templateUrl: './heroes.component.html',

   styleUrls: ['./heroes.component.css']

 })

 export class HeroesComponent implements OnInit {

   heroes = HEROES;

   selectedHero: Hero;

   constructor() { }

   ngOnInit() {

   }

   onSelect(hero: Hero): void {

     this.selectedHero = hero;

   }

 }

 --------------------------------------------------------------------------

 //heroes.component.html

 <h2>My Heroes</h2>

 <ul class="heroes">

   <li *ngFor="let hero of heroes"

     [class.selected]="hero === selectedHero"

     (click)="onSelect(hero)">

     <span class="badge">{{hero.id}}</span> {{hero.name}}

   </li>

 </ul>

 <div *ngIf="selectedHero">

   <h2>{{ selectedHero.name | uppercase }} Details</h2>

   <div><span>id: </span>{{selectedHero.id}}</div>

   <div>

     <label>name:

       <input [(ngModel)]="selectedHero.name" placeholder="name">

     </label>

   </div>

 </div>

 --------------------------------------------------------------------------

 //heroes.component.css

 .selected {

   background-color: #CFD8DC !important;

   color: white;

 }

 .heroes {

   margin: 0 0 2em 0;

   list-style-type: none;

   padding: 0;

   width: 15em;

 }

 .heroes li {

   cursor: pointer;

   position: relative;

   left: 0;

   background-color: #EEE;

   margin: .5em;

   padding: .3em 0;

   height: 1.6em;

   border-radius: 4px;

 }

 .heroes li.selected:hover {

   background-color: #BBD8DC !important;

   color: white;

 }

 .heroes li:hover {

   color: #607D8B;

   background-color: #DDD;

   left: .1em;

 }

 .heroes .text {

   position: relative;

   top: -3px;

 }

 .heroes .badge {

   display: inline-block;

   font-size: small;

   color: white;

   padding: 0.8em 0.7em 0 0.7em;

   background-color: #607D8B;

   line-height: 1em;

   position: relative;

   left: -1px;

   top: -4px;

   height: 1.8em;

   margin-right: .8em;

   border-radius: 4px 0 0 4px;

 }

Angular2.x-子组件

 <--!

 　　hero-detail.component.ts

 -->

 import { Component, OnInit, Input } from '@angular/core';

 import { Hero } from '../hero';

 @Component({

   selector: 'app-hero-detail',

   templateUrl: './hero-detail.component.html',

   styleUrls: ['./hero-detail.component.css']

 })

 export class HeroDetailComponent implements OnInit {

   @Input() hero: Hero;

   constructor() { }

   ngOnInit() {

   }

 }

 ----------------------------------------------------------------------------------

 <--!

 　　hero-detail.component.html

 -->

 <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>

 -----------------------------------------------------------------------------------

 <--!

 　　heroes.component.html

 -->

 <h2>My Heroes</h2>

 <ul class="heroes">

   <li *ngFor="let hero of heroes"

     [class.selected]="hero === selectedHero"

     (click)="onSelect(hero)">

     <span class="badge">{{hero.id}}</span> {{hero.name}}

   </li>

 </ul>

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

简述的话，也就是：

1. 在app下生成

ng generate component hero-detail

2.heroes.component.html复制到hero-detail.component.html（selectedHero内容全部修改为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>

3.在hero-detail.component.ts（导入heroes）

import { Hero } from '../hero';

4.在hero-detail.component.ts(导入输入)

import { Component, OnInit, Input } from '@angular/core';

5.添加一个hero属性，在装饰器之前。@Input()

@Input() hero: Hero;

6.显示heroes.component.html

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

巴特西

Angular2.x-主/细节组件

9.X-使`HeroDetailComponent`

9.1-编写模板

9.2-添加heroes属性`@Input()`

9.3-显示`HeroDetailComponent`

更新`HeroesComponent`模板

什么改变？

最新文章

热门文章

巴特西

Angular2.x-主/细节组件

9.X-使HeroDetailComponent

9.1-编写模板

9.2-添加heroes属性@Input()

9.3-显示HeroDetailComponent

更新HeroesComponent模板

什么改变？

最新文章

热门文章

9.X-使`HeroDetailComponent`

9.2-添加heroes属性`@Input()`

9.3-显示`HeroDetailComponent`

更新`HeroesComponent`模板