前面的【angular6.0使用教程:创建自定义组件 】我们创建了一个自定义组件,但是,有时我们需要在某个列表中的某一条的详情,我们就需要创建一个详情组件。这时,我们就需要一组主从组件。主组件用来类似产品列表,从组件用来类似产品的说情页面。那么,angular6.0如何来实现主从组件的数据传递,如:获取产品详情,必须要从产品列表页获取产品的id。
第一步,我们创建一个list组件:
ng g component list //创建产品列表页组件
在list.component.ts文件中添加如下代码:
heroes = [ //产品数组 { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' }, { id: 13, name: 'Bombasto' }, { id: 14, name: 'Celeritas' }, { id: 15, name: 'Magneta' }, { id: 16, name: 'RubberMan' }, { id: 17, name: 'Dynama' } ]; selectedHero:any; //定义一个属性 getdata(hero:any):void{ //定义一个点击函数, this.selectedHero=hero; //把点击获取到的值 赋给 selectedHero属性 }
在list.component.html文件添加调用数据:
<!-- 产品列表 --> <div> <li *ngFor="let hero of heroes" (click)="getdata(hero)"> <!-- 点击获取数据 --> {{ hero.name }} </li> </div> <!-- 调用从组件 并向从组件传递数据 --> <app-post [hero]="selectedHero"></app-post>
上面代码表示,点击一次就获取heroes数组的一个元素数据hero赋值给selectedHero属性,然后把这个selectedHero属性数据传递给【从组件app-post】的hero属性
第二步:在app.component.html文件中调用 这个list组件:
<app-list></app-list> 这样,list组件的列表数据就可以在前台显示
第三步:创建一个post组件:
ng g component post //创建产品详情页组件
在post.component.ts组件文件中添加如下代码:
import { Component, OnInit,Input } from '@angular/core'; //添加Input装饰器,从组件要想获取主组件的数据,必须添加这个装饰器@Input() hero:any; //添加带Input装饰器的属性
在post.component.html文件中添加代码:
<p> 产品详情: <br><br> 产品ID:{{ hero.id}} <br> 产品名称:{{ hero.name }} </p>
这样,angular6.0的主从组件数据的传递就完成了。我们在点击list列表中的某条产品时,就会在下面显示这个产品的详情。如下图:

想要找到你还真是不容易