微客导航 » 文章资讯 » 详解Angular6学习笔记之主从组件

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

2023-09-08 09:46:05 228

主从组件

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

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

1.创建一个新的组件

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

wjydeMacBook-Pro:demowjy$nggeneratecomponenthero-detail
CREATEsrc/app/hero-detail/hero-detail.component.css(0bytes)
CREATEsrc/app/hero-detail/hero-detail.component.html(30bytes)
CREATEsrc/app/hero-detail/hero-detail.component.spec.ts(657bytes)
CREATEsrc/app/hero-detail/hero-detail.component.ts(288bytes)
UPDATEsrc/app/app.module.ts(548bytes)

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

2.编写HeroDetailComponent的模版（hero-detail.component.html）

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

粘贴过来的html代码中，有selectHero这个属性，由于现在我们展示的不仅仅是被选中的hero，而是需要展示的是每一个hero，这个过程相当于将HeroDetail这个组件的功能扩大化。所以将其更改为：hero,hero-detail.component.html如下：


{{hero.name|uppercase}}Details
id:{{hero.id}}

name:

因为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'。把添加到HeroesComponent模板的底部，以便把英雄详情的视图显示到那里，并把HeroesComponent.selectedHero绑定到该元素的hero属性，HeroesComponent模版即：

MyHeroes


{{hero.id}}{{hero.name}}

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

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

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

返回顶部
3162201930
czq8825@qq.com

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

{{hero.name|uppercase}}Details

MyHeroes

热门推荐

随机推荐