阿坝州网站建设公司

Angular6中怎么实现一个主从组件

Angular6中怎么实现一个主从组件，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

成都服务器托管，成都创新互联公司提供包括服务器租用、成都移动云计算中心、带宽租用、云主机、机柜租用、主机租用托管、CDN网站加速、空间域名等业务的一体化完整服务。电话咨询：18982081108

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如下：


 
{{hero.name | uppercase}} Details

 
id: {{hero.id}}

 

  
 

 

因为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模版即：

My Heroes


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

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

  • 通过缩减 HeroesComponent 的职责简化了该组件。

  • 把 HeroDetailComponent 改进成一个功能丰富的英雄编辑器，而不用改动父组件 HeroesComponent。

  • 改进 HeroesComponent，而不用改动英雄详情视图。

  • 将来可以在其它组件的模板中重复使用 HeroDetailComponent。

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。


分享名称：Angular6中怎么实现一个主从组件
文章出自：http://azwzsj.com/article/ijjsjh.html

其他资讯