• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > angular开发 > angular6.0使用教程:angular主从组件

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

    作者: 分类:angular开发 点击: 341 次
    wordpress CMS主题:ssmay主题

      前面的【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列表中的某条产品时,就会在下面显示这个产品的详情。如下图:

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

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201806115657.html
    本文时间:2018-06-11 11:12:28
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    一条回应:“angular6.0使用教程:angular主从组件”

    1. […] 在angular6.0使用教程:angular主从组件章节我们介绍了父组件向子组件传递数据,当时是在同一个页面传递数据的。而本章的angular数据传递将是在不同页面间的传递,即list组件页面向post组件页面传递数据。 […]

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.