Angular组件封装

前言

在项目中我们常看到一个页面里的表格在很多页面里面用到，我们会把它封装成一个组件供多个页面引用我们在页面看到类似于下图的标签，就是引用的封装好的组件

<data-table (changepage)="changepage($event)" 
    [editButton]="btnEdit"
    (addOpen)="addOpen($event,addModal)" (editData)="edit($event,editModal)" (deletesEmit)="deleteDatas($event)" (operat)="operatData($event,editModal)"
    [importButton]="btnImport" (importEmit)="import($event)" [exportButton]="btnExport" (exportEmit)="export()" [buttonList]="btnList"
    [total]="total" [data]="data" [page]="page" [sizeList]="sizeList" [paging]="paging" [pageSize]="pageSize" [buttonstyle]="btnstyle">
</data-table> 

• 如果我们要修改里面的内容可以找到封装好的组件的位置，移入我们的页面新建的组件中，可以在我们自己的组件内修改
• 还可以将组件的内容直接写在我们的页面上，也就是将引用的组件的内容自己写一遍
• 根据上面引用的组件，我们可以到node-modules中找到