ng-zorro-ant中关于angular实现的面包屑源码解读

想要分析ng-zorro-ant的面包屑源码,首先要先了解ng-content

 1.ng-zorro-ant 的官网https://ng.ant.design/version/0.7.x/components/breadcrumb/zh

1.ng-content

   这部分大家可以搜索一下ng-content，有更好的博主做了总结，在这里我只简单的介绍一下它的用途。

   此用法可以接受外部投射进来的内容

  1.外部引入组件

    开始，我是外部嵌入的内容，
    

       header
    
    

       footer
    
    

       left
    
    结束

   2.组件内容

       扩展一下select 属性，可以让你在特定的地方投射具体的内容.如上所示，header对应标签选择器，类选择器和属性选择器都如下所示，会将内容展示到对应的地方。

    

       我是人
    
    

        
    
    

        
    
    

        
    
    

        
    

 2 .面包屑组件

   ng-alain的面包屑组件是分两个组件实现的

      
        Home
      
 

 1.nz-breadcrumb的源代码

  
    
    {
    { breadcrumb.label }}
  

2.nz-breadcrumb-item的源代码

      
    
    
      
        
      
      
         {
    { nzBreadCrumbComponent.nzSeparator }}
      
 

3.官网上的实现

  Home / Application List / An Application

因为nzAutoGenerate默认是false的,所以可以得知，当nzAutoGenerate变量设为false时，组件的模板投射是通过ng-content实现的。

nzSeparator 默认是/，可以设置string | TemplateRef，此处代码可以具体去看官网源代码。

此处谈谈ng-container和ngTemplateOutlet两个属性

4.ng-container

 是一个逻辑容器，可用于对节点进行分组，但不作为 DOM 树中的节点，它将被渲染为 HTML中的 comment 元素，它可用于避免添加额外的元素来使用结构指令

5.ngTemplateOutlet 

 ngTemplateOutlet 是一个指令，它接收模板变量，可以实现模板的动态渲染。因此当nzSeparator是TemplateRef时，会将

isTemplateRef设置为true,ngTemplateOutlet 会将TemplateRef动态展示出来。

 同样的，因为ngTemplateOutlet 的动态创建模板的方法，也经常用来代替ng-content，因为ng-content只是用来展示的，组件只被实例化了一次 - 从未被销毁和重新创建，如果用*ngIf来判断显示，并不会被初始化第二次，但我们用ngTemplateOutlet可以解决这个问题，此处用面包屑组件举一个例子。

 
      
       
      
    
 

nz-breadcrumb组件里用以下代替ng-content,template是动态传进来的模板

        


注意,接收template的方法为
@ContentChild(TemplateRef) template: TemplateRef;

 

6.最后

  当nzAutoGenerate为true的方法大家可以去看看源码,这一部分是利用路由自动实现的方法，对于路由存储这块我还不太熟，先不做介绍了。