详解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 相关文章推荐
Javascript 读书笔记索引贴
Jan 11 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 Javascript
js 实现验证码输入框示例详解
Sep 23 Javascript
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和ACCESS写聊天室(九)
2006/10/09 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
vue根据值给予不同class的实例
2018/09/29 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
python查询mysql中文乱码问题
2014/11/09 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
python实现宿舍管理系统
2019/11/22 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
python实现经典排序算法的示例代码
2021/02/07 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
行政副总岗位职责
2014/02/23 职场文书
简单租房协议书
2014/04/09 职场文书
教师产假请假条范文
2014/04/10 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL