wordpress CMS主题 微信
Home > JS应用 > angular6.0使用教程:angular主从组件

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

高时银博客 JS应用 点击: 44 次 0 1
  • 标签:
  • 前面的【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
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论