详解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 相关文章推荐
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
DOM 高级编程
May 06 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
vue+AI智能机器人回复功能实现
Jul 16 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 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中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
7个Javascript地图脚本整理
2009/10/20 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
python多进程读图提取特征存npy
2019/05/21 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
css sprite简单实例
2016/05/23 HTML / CSS
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
酒吧员工的岗位职责
2013/11/26 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
打造完美自荐信
2014/01/24 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
生产车间管理制度
2015/08/04 职场文书
python自动化测试之Selenium详解
2022/03/13 Python
Oracle使用别名的好处
2022/04/19 Oracle