详解Angular6学习笔记之主从组件


Posted in Javascript onSeptember 05, 2018

主从组件

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

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

1.创建一个新的组件

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

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

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

2.编写 HeroDetailComponent的模版(hero-detail.component.html)

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

粘贴过来的html代码中,有selectHero这个属性,由于现在我们展示的不仅仅是被选中的hero,而是需要展示的是每一个hero,这个过程相当于将HeroDetail这个组件的功能扩大化。所以将其更改为:hero , 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>

因为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的详细信息,这个时候,Heroes组件和heroDetail组件就有了主从关系,heroes组件需要将需要展示详情的Hero对象传给具有展示功能的HeroDetail组件

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

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

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

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

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

Javascript 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
javascript的函数作用域
Nov 12 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
webpack4 入门最简单的例子介绍
Sep 05 #Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 #Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 #Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 #Javascript
解决vue点击控制单个样式的问题
Sep 05 #Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 #Javascript
vuejs点击class变化的实例
Sep 05 #Javascript
You might like
php下目前为目最全的CURL中文说明
2010/08/01 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
javascript中的原型链深入理解
2014/02/24 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
python字符串中的单双引
2017/02/16 Python
Python中正则表达式详解
2017/05/17 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
python函数定义和调用过程详解
2020/02/09 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
Yahoo-PHP面试题1
2016/07/20 面试题
求职者简历中的自我评价
2013/10/20 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
小小的船教学反思
2014/02/21 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
研究生导师推荐信
2015/03/25 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
Java实现给Word文件添加文字水印
2022/02/15 Java/Android