angular6.0使用教程：angular主从组件

扫描下面的二维码，“关注”我的头条号，我会每天更新免费视频课程。

前面的【angular6.0使用教程：创建自定义组件 】我们创建了一个自定义组件，但是，有时我们需要在某个列表中的某一条的详情，我们就需要创建一个详情组件。这时，我们就需要一组主从组件。主组件用来类似产品列表，从组件用来类似产品的说情页面。那么，angular6.0如何来实现主从组件的数据传递，如：获取产品详情，必须要从产品列表页获取产品的id。

angular4.0/5.0/6.0视频教程

第一步，我们创建一个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列表中的某条产品时，就会在下面显示这个产品的详情。如下图：