打开应用里的 AppComponent 这个组件，这个组件是应用的根组件，因为它在 AppModule 模块的 bootstrap 里面，应用启动的时候，会创建这个组件。

打开这个 AppComponent 组件的视图文件，在组件的视图里，用了 Ant Design 里提供的一些布局用的组件，比如这个 nz-layout，这个元素是布局用的容器。它里面可以嵌套其它的布局组件，比如 nz-header，nz-sider，nz-footer，nz-content 等等。

nzCollapsible

这里嵌套了一个 nz-sider，它是一个边栏组件，就是你在界面上看到的这个左边栏，组件上可能会公开一些属性，使用这些属性可以配置一下这个组件。比如这个 nzCollapsible 表示的就是这个边栏能不能收起来。

添加了这个属性，表示这个边栏可以被收起来， 下面把 nzTrigger 的值设置成了 null，意思是要自定义一下收起边栏用的东西。

如果去掉这个设置，你会发现，在边栏上会出现一个默认的可以收放边栏的东西。因为我们用的这个模板自定义了一下这个收放边栏的按钮，所以可以让 nzTrigger 的值是 null 。

nzCollapsed 表示的是边栏当前的收起状态，这里用了一个双向绑定，后面的这个 isCollapsed 是组件里的一个属性，打开这个组件，你会发现，组件里有一个 isCollapsed ，默认它的值是 false。

在边栏右边的主内容里面，有个自定义的小图标，在这个小图标周围的 span 标签上面，绑定了一个 click ，也就是点击事件，点了它做的事情就是设置组件的 isCollapsed 属性的值，让它的值等于跟之前相反的值。 也就是如果它的值现在是 true，点了小图标，这个属性的值就会变成 false，如果是 false，点了以后 isCollapsed 的值就会是 true 。

这个小图标会判断 isCollapsed 属性，根据它值使用不同的小图标。为了清楚一些，可以在 header 这个位置上，绑定输出组件里的 isCollapsed 属性。

按一下主体头部上的这个小图标，可以收起边栏。因为触发了点击事件，设置了组件里的 isCollapsed 属性的值，边栏组件上表示当前收起状态的属性双向绑定了组件里的 isCollapsed 的值，所以组件里的这个值有变化，就会影响到这个边栏的收起状态。

isCollapsed 的值是 true，这个小图标跟之前也是不一样的，注意图标里的这个小箭头。

再按一下这个小图标，这次会把 isCollapsed 设置成 false，边栏又会变成展开的状态。

调整一下窗口的尺寸，到一定宽度的时候，这个边栏也会自动折起来。这个触发边栏折起的宽度值是在 nz-sider 元素的 nzBreakpoint 设置的， md 表示中号尺寸，可以换成 sm 试一下，表示小尺寸，这些代号其实表示的是一个特定的宽度值，这个值是 Ant Design 里面自己设置的。

再到浏览器上试一下，这次触发边栏折起来的窗口会比之前小一些。