建站资讯

绍兴微信小程序开发_详解Angular6学习笔记之主从

作者:admin 发布时间:2021-01-08
详解Angular6学习笔记之主从组件     作者:   这篇文章主要介绍了详解Angular6学习笔记之主从组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

继学习笔记6,现在可以在页面上显示一个数组,但是原则上不能将所有特性放在同一个组件中,因为如果将所有特性放在同一个组件中,当特性特别多时,组件就变得不好维护了。所以要将大型组件拆分为多个小型组件,使每一个小型组件集中处理某一个特性任务或者工作流,而且这样也便于维护。

这次要将学习笔记6中的查看hero详情,放置在一个新的,独立,可复用的组件中,集中在新的组件管理和维护hero详情的信息。

1.创建一个新的组件

使用 Angular CLI 生成一个名叫 hero-detail 的新组件。

wjydeMacBook-Pro:demo wjy$ ponent hero-detail
CREATE src/app/hero-detail/ponent.css (0 bytes)
 (30 bytes)
CREATE src/app/hero-detail/ponent.spec.ts (657 bytes)
CREATE src/app/hero-detail/ponent.ts (288 bytes)
UPDATE src/app/app.module.ts (548 bytes)

这样就生成了 HeroDetailComponent 组件所需要的文件,并把它声明在 AppModule 中。

<)

从 HeroesComponent 模板的底部把表示英雄详情的 HTML 代码剪切粘贴到所生成的 HeroDetailComponent 模板中。

<如下:

 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 

因为HeroDetail重的hero是从其他父组件得到。所以hero 属性必须是一个带有 @Input() 装饰器的输入属性,因为外部的 HeroesComponent 组件将会绑定到它。

具体步骤:

导入Hero

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

导入Input符号

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

定义hero

@Input() hero: Hero;

这样,就对heroDetail的类文件写好了,heroDetail所做的工作就是:从其他的父组件中接收一个Hero类型的对象,并将它展示出来

3.显示 HeroDetailComponent

现在有HeroDetail组件显示每一个Hero的具体详情信息,而Heroes组件需要显示每一个Hero的

HeroDetailComponent 的选择器是 'app-hero-detail'。 把 app-hero-detail 添加到 HeroesComponent 模板的底部,以便把英雄详情的视图显示到那里,并把 HeroesComponent.selectedHero 绑定到该元素的 hero 属性, HeroesComponent模版即:

 h2 My Heroes /h2 
 li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero" 
 span {{hero.id}} /span {{hero.name}}
 /li 
 /ul 
 app-hero-detail [hero]="selectedHero" /app-hero-detail 

保存浏览器刷新,界面和之前的不会有变化,但是会有一下优点:

通过缩减 HeroesComponent 的职责简化了该组件。 把 HeroDetailComponent 改进成一个功能丰富的英雄编辑器,而不用改动父组件 HeroesComponent。 改进 HeroesComponent,而不用改动英雄详情视图。 将来可以在其它组件的模板中重复使用 HeroDetailComponent。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。



收缩