详解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 表单验证扩展(三)
Oct 20 Javascript
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
Python计算字符宽度的方法
2016/06/14 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
python 魔法函数实例及解析
2019/09/25 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
python3.7调试的实例方法
2020/07/21 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
保密普查工作实施方案
2014/02/25 职场文书
公司担保书范文
2014/05/21 职场文书
教师读书活动心得体会
2016/01/14 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书