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.外部引入组件

<demo-component>
    开始，我是外部嵌入的内容，
    <header>
       header
    </header>
    <div class="footer">
       footer
    </div>
    <div name="left">
       left
    </div>
    结束
</demo-component>

   2.组件内容

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

<div >
    <h2>
       我是人
    </h2>
    <div style="color:red">
        <ng-content></ng-content>
    </div>
    <div>
        <ng-content select="header"></ng-content>
    </div>
    <div>
        <ng-content select=".footer"></ng-content>
    </div>
    <div >
        <ng-content select="[name=left]"></ng-content>
    </div>
</div>

 2 .面包屑组件

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

<nz-breadcrumb>
      <nz-breadcrumb-item>
        Home
      </nz-breadcrumb-item>
 </nz-breadcrumb>

 1.nz-breadcrumb的源代码

<ng-content></ng-content>
<ng-container *ngIf="nzAutoGenerate">
  <nz-breadcrumb-item *ngFor="let breadcrumb of breadcrumbs">
    <!-- We do not simply use routerLink here to avoid importing RouterModule to BreadcrumbModule. -->
    <a [attr.href]="breadcrumb.url" (click)="navigate(breadcrumb.url, $event)">{{ breadcrumb.label }}</a>
  </nz-breadcrumb-item>
</ng-container>

2.nz-breadcrumb-item的源代码

<span class="ant-breadcrumb-link">
      <ng-content></ng-content>
    </span>
    <span class="ant-breadcrumb-separator">
      <ng-container *ngIf="nzBreadCrumbComponent.isTemplateRef; else stringTemplate">
        <ng-template [ngTemplateOutlet]="nzBreadCrumbComponent.nzSeparator"></ng-template>
      </ng-container>
      <ng-template #stringTemplate>
         {{ nzBreadCrumbComponent.nzSeparator }}
      </ng-template>
 </span>

3.官网上的实现

  Home / Application List / An Application

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

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

此处谈谈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-template>
      <nz-breadcrumb-item>
       
      </nz-breadcrumb-item>
    </ng-template>
 </nz-breadcrumb>

nz-breadcrumb组件里用以下代替ng-content,template是动态传进来的模板
<div class="content" *ngIf="show">
        <ng-container [ngTemplateOutlet]="template"></ng-container>
</div>

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

 

6.最后

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