收缩框制作

建立项目 创建指令

ng new collapsedemo --style=scss
ng g d collapse --flat --spec=false

引入boostrap css
index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

收缩框的制作有三种方式
一 指令内控制style
二 指令内控制布尔值 通过if条件显示隐藏
三 指令内控制css .collapse
四 hostBinding控制style
五 renderer控制style

export

ng g c collapseExport --spec=false
ng g d collapse-export/collapse --flat --spec=false