###1. 需要实现的效果图展示(如果只是需要实现组件封装,请直接浏览 4): [图片] ###2. 组件的思想说明: 组件化并不是前端所特有的,一些其他的语言或者桌面程序等,都具有组件化的先例。确切的说,只要有 UI 层的展示,就必定有可以组件化的地方。简单来说,组件就是将一段 UI 样式和其对应的功能作为独立的整体 ..

angular4.x 中 如何封装组件

###1.需要实现的效果图展示(如果只是需要实现组件封装,请直接浏览 4):

ng4实现公共组件封装操作.gif

###2.组件的思想说明:

组件化并不是前端所特有的,一些其他的语言或者桌面程序等,都具有组件化的先例。确切的说,只要有 UI 层的展示,就必定有可以组件化的地方。简单来说,组件就是将一段 UI 样式和其对应的功能作为独立的整体去看待,无论这个整体放在哪里去使用,它都具有一样的功能和样式,从而实现复用,这种整体化的细想就是组件化。不难看出,组件化设计就是为了增加复用性,灵活性,提高系统设计,从而提高开发效率

###3.说说抽离组件的好处和需要注意的事项:

好处——解决以前代码里面需要嵌套 N 个列表的问题:

1.组件的思想,可以理解为积木,拼图的一个零部件,哪里需要哪里搬,这样带来的好处就是复用性强
2.节省时间,不用去写重复的界面代码
3.便于维护和应对新的需求变更

注意事项

1.组件带来方便的同时,也带来了一系列的问题,最最核心的就是传参问题:
第一种情况,父组件向子组件传值操作
第二种情况,子组件向父组件传值操作
2.组件的设计最好在项目初期就制定好,组件的原则,尽量单一,不涉及界面的业务逻辑,通俗的说,组件尽量只用来做展示,一业务逻辑尽量通过业务代码来控制实现。
3.当然,要抽离组件,是一个比较耗费时间的工作,需要合理安排时间来进行

###4.进入今天的主题
#####step1.首先定义一个组件模块
ts

import {Component, Input} from '@angular/core'


@Component({
    selector: 'snail-showcase-nav',
    templateUrl: './nav.component.html',
    styleUrls: ['./nav.component.css'],

})
export class MemberNavComponent {

    @Input() memberId: any  ////会员id
    @Input() memberName: any  ////会员id

}


/*
* 
* 1.引入该组件 <snail-showcase-nav [memberId]="memberId" [memberName]="memberDetail.name"></snail-showcase-nav>
* 2.需要多配置一个会员名字的参数 memberId: any; //会员id memberName: string = ''; //会员name
* 3.在父组件中 加入:encapsulation: ViewEncapsulation.None//去掉对应Component打包出来的css作用域,引入自定义组件才能有样式效果
*
* */


HTML

<ul class="header clearfix">
    <li class="nav over-ell">
        <a routerLink="/member" class="return">会员</a>
        &gt;
        <span class="name">{{memberName}}</span>
    </li>
    <a class="box" routerLink="/member/detail/{{memberId}}" routerLinkActive="active">
        <div class="button">&emsp; 概要 &emsp;</div>
    </a>
    <a class="box" routerLink="/member/page/cost/{{memberId}}" routerLinkActive="active">
        <div class="button">消费记录</div>
    </a>
    <a class="box" routerLink="/member/page/store/{{memberId}}" routerLinkActive="active">
        <div class="button">余额流水</div>
    </a>
    <a class="box" routerLink="/member/page/count/{{memberId}}" routerLinkActive="active">
        <div class="button">次卡记录</div>
    </a>
    <a class="box" routerLink="/member/page/shopping/{{memberId}}" routerLinkActive="active">
        <div class="button">购物卡</div>
    </a>
    <a class="box" routerLink="/member/page/Coupon/{{memberId}}" routerLinkActive="active">
        <div class="button">优惠券</div>
    </a>
    <a class="box" routerLink="/member/page/message/{{memberId}}" routerLinkActive="active">
        <div class="button">短信记录</div>
    </a>
    <a class="box" routerLink="/member/page/up/{{memberId}}" routerLinkActive="active">
        <div class="button">等级变更记录</div>
    </a>
</ul>


CSS 省略



#####step2.在公共的 @NgModule 里面引入,大概长下面这样

declarations: [

        MemberShoppingLog
     
    ],

#####step3.进入需要展示这个效果的界面,引入子组件

如下:

<snail-showcase-nav [memberId]="memberId" [memberName]="memberDetail.name"></snail-showcase-nav>

参数说明:组件传参模式

[memberId]="memberId" //需要定义好 memberId
[memberName]="memberDetail.name" //需要定义好 memberName

#####step4.子组件接收参数设置:

@Input() memberId: any  ////会员id
@Input() memberName: any  ////会员id

#####step5.关于样式失效问题,请看前面的文章说明。

#####step6. 关于跳转并选中,借用路由标签特性:
routerLinkActive="active"

 <a class="box" routerLink="/member/page/store/{{memberId}}" routerLinkActive="active">
        <div class="button">余额流水</div>
    </a>

本文完。

回帖
请输入回帖内容...