ng-zorro / ng-zorro-antd

Angular UI Component Library based on Ant Design

NG-ZORRO

An enterprise-class Angular UI component library based on Ant Design.

English | 简体中文

✨ Features

• An enterprise-class UI design system for Angular applications.
• 60+ high-quality Angular components out of the box.
• Written in TypeScript with predictable static types.
• The whole package of development and design resources and tools.
• Support OnPush mode, high performance.
• Powerful theme customization in every detail.
• Internationalization support for dozens of languages.

☀️ License

MIT

🖥 Environment Support

• Angular ^17.0.0
• Server-side Rendering
• Modern browsers including the following specific versions
• Electron

Edge	Firefox	Chrome	Safari	Opera	Electron
last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

🎨 Design Specification

ng-zorro-antd synchronizes design specification with Ant Design on a regular basis, you can check the log online.

📦 Installation

We recommend using @angular/cli to install. It not only makes development easier, but also allows you to take advantage of the rich ecosystem of angular packages and tooling.

$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng add ng-zorro-antd

More information about @angular/cli here.

You can also install ng-zorro-antd with npm or yarn

$ npm install ng-zorro-antd

🔨 Usage

Import the component modules you want to use into your app.module.ts file and feature modules.

import { NzButtonModule } from 'ng-zorro-antd/button';

@NgModule({
  imports: [ NzButtonModule ]
})
export class AppModule {
}

@angular/cli users won't have to worry about the things below but it's good to know.

And import style and SVG icon assets file link in angular.json.

{
  "assets": [
+   {
+     "glob": "**/*",
+     "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+     "output": "/assets/"
+   }
  ],
  "styles": [
+   "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}

See Getting Started for more details.

🔗 Links

• ng-zorro-antd-mobile
• ng-alain
• Snippet extension for VSCode

⌨️ Development

$ git clone [email protected]:NG-ZORRO/ng-zorro-antd.git
$ cd ng-zorro-antd
$ npm install
$ npm run start

Browser would open automatically.

🤝 Contributing

We welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues.

If you're new to posting issues, we ask that you read How To Ask Questions The Smart Way (This guide does not provide actual support services for this project!), How to Ask a Question in Open Source Community and How to Report Bugs Effectively prior to posting. Well written bug reports help us help you!

Thanks to JetBrains for supporting us free open source licenses.

❓ Help from the Community

For questions on how to use ng-zorro-antd, please post questions to using the ng-zorro-antd tag. If you're not finding what you need on stackoverflow, you can find us on as well.

As always, we encourage experienced users to help those who are not familiar with ng-zorro-antd!

🎉 Users

• Alibaba
• Aliyun
• ThoughtWorks
• China Merchants Bank
• Ververica
• Apache Flink
• Apache Zeppelin
• Apache Submarine
• Apache Metron
• Process Automation Group
• AISINOCO
• GongDao
• UC Express
• Qingflow
• DataGrand
• ScentBird
• Southern Institute of Technology
• Hapify (Dynamic boilerplates tool)

We list some users here, if your company or product uses NG-ZORRO, let us know here!

Love ng-zorro-antd? Give our repo a star ⭐ ⬆️.

ng-zorro-antd's Issues

关于生产库使用和版本计划

请问，目前可以在生产环境使用了吗？后续有没有发布计划，版本升级改怎么处理？谢谢。

Support contextmenu component

I'm submitting a...

[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

Enterprise-class there are a lot of contextmenu, this can support ?

[建议] Breadcrumb 最后一项加粗问题

I'm submitting a...

[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

What is the motivation ?

虽说【面包屑】绝大多数运用在导航，但有时需要做一些底部导航时，如果默认最后一项强制加粗会显得非常奇怪。

期待一下。。

npm install ng-zorro-antd --save ~Error

× Install fail! SyntaxError: Unexpected token < in JSON at position 0
SyntaxError: Unexpected token < in JSON at position 0
at Object.parse (native)

Is the official website under maintenance? I cannot connect it.

按照官方的快速开始，编译出错

在执行ng serve --port 0 --open，报错

Layout 布局 样式问题

使用Layout 布局时，使用官方示例代码，
html代码：

<nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null" nzCollapseChange="onCollapseChange" >  
      <div class="logo"></div>  
      <ul nz-menu [nzTheme]="'dark'" [nzMode]="isCollapsed?'vertical':'inline'">  
        <li nz-submenu>  
          <span title><i class="anticon anticon-user"></i><span class="nav-text">菜单</span></span>
          <ul>
            <li nz-menu-item>Tom</li>
            <li nz-menu-item>Bill</li>
            <li nz-menu-item>Alex</li>
          </ul>
        </li>
        <li nz-submenu>
          <span title><i class="anticon anticon-team"></i><span class="nav-text">菜单</span></span>
          <ul>
            <li nz-menu-item>Team 1</li>
            <li nz-menu-item>Team 2</li>
          </ul>
        </li>
        <li nz-menu-item><span><i class="anticon anticon-file"></i><span class="nav-text">File</span></span></li>
      </ul>
    </nz-sider>

ts代码：

export class AppComponent implements OnInit {

  isCollapsed = false;

  constructor() {
  }

  ngOnInit() {
  }
}

当isCollapsed设置为false时，样式变成了如下情况 ：

子路由中datepicker组件报错

项目中有嵌套路由，首先在app.component.html中引入跟组件：
<nz-root> <router-outlet></router-outlet> </nz-root>
并在根 module 和子module都引入了NgZorroAntdModule
在子module调用datepicker
<nz-datepicker [(ngModel)]="_date" [nzPlaceHolder]="'Select date'"></nz-datepicker>

chrome报错：

compiler.es5.js:1690 Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'nz-datepicker'.

1. If 'nz-datepicker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'nz-datepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
   
   

   {{item.name}}开始时间

   
   <nz-datepicker [ERROR ->][(ngModel)]="_date" [nzPlaceHolder]="'Select date'">

是我调用有什么问题吗？

过来拜个山头，以后多多交流。

pagination组件样式

pagination组件，在点到最后一页后，下一页 按钮在禁用时鼠标移上去还有蓝色背景，不知是不是原本就是这样设计的

大神们添加点可视化组件吧

折线图，饼状图那样的

希望每次切换页面的时候，窗口可以滚动到最顶端

现在在阅读文档的时候，每次点击菜单切换页面，窗口不会滚动到最顶端，如果点击的是最底下的几个菜单，一开始看到的就是页面底部的内容，会造成阅读上的不便

About Schedule or Plan

I hope your team can formulate a plan about NG - ZORRO.
The plan can let us know when there will be a new component release or what is the break change.
Thanks.
Best Regard,

Use angular commit message format

I'm submitting a...

[ ] Bug report  
[ ] Feature request
[x] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

See here

第一个版本应该是8月15号发布

https://ng.ant.design/#/changelog
从更新日志来看，第一个版本应该在8月15号回出来，期待！！！

运行没有问题 build时候报错 为啥呢?

angular-cli: 1.0.0-beta.28.3
node: 6.10.3
os: win32 x64
@angular/cdk: 2.0.0-beta.8
@angular/animations: 4.3.4
@angular/common: 4.3.4
@angular/core: 4.3.4
@angular/forms: 4.3.4
@angular/platform-browser: 4.3.4
@angular/cli: 1.3.0
@angular/compiler: 4.3.4
@angular/compiler-cli: 4.3.4
@angular/http: 4.3.4
@angular/language-service: 4.3.4
@angular/platform-browser-dynamic: 4.3.4
@angular/router: 4.3.4

排队等待

Waiting...

NG-ZORRO [尚未发布，如果看到该页面，请暂时不要传播，谢谢]

SORRY [被隐藏的地址 ]

H:\NG-ZORRO\FirstProject> npm install ng-zorro-antd --save
npm ERR! Windows_NT 10.0.10586 
npm ERR! argv "D:\\nodejs_v6.11.2\\node.exe" "D:\\nodejs_v6.11.2\\node_modules\\npm\\bin\\npm-cli.js" "install" "ng-zorro-antd" "--save" 
npm ERR! node v6.11.2 
npm ERR! npm  v3.10.10 
npm ERR! code E404

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/ng-zorro-antd
npm ERR! 404
npm ERR! 404  'ng-zorro-antd' is not in the npm registry. 
npm ERR! 404 You should bug the author to publish it (or use the name yourself!) 
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url. 

npm ERR! Please include the following file with any support request: 
npm ERR!     H:\NG-ZORRO\FirstProject\npm-debug.log 

怎么统一改变整体字体大小？

如上所示，默认按官方网站的“快速上手”建立了一个工程，但是字体很小，请问怎么统一放大一下整体字体大小呢？谢谢！

走马灯效果报错 Cannot set property 'isActive' of undefined

上面是报错信息，下面是我循环的数组

Make <nz-root> component optional

I'm submitting a...

[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

Current behavior

As suggested in doc, <nz-root> component must be listed at outermost layer of the app, which seems inconvenient for user.

Expected behavior

High-level goal:

Do not require <nz-root> in component template.

Detailed design:

• Add optional configuration param in forRoot() method.
• Introduce a separate InjectionToken for that configuration param.
• Use a dynamic component to apply global styles.
• Use a APP_INITIALIZER to apply font styles.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z

ng-zorro-antd version: X.Y.Z

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

有mobile版本么？还是预计什么时候发布。

在根 module 中使用 NgZorroAntdModule.forRoot()的疑问

你好，在快速上手中提示：‘在根 module 中使用 NgZorroAntdModule.forRoot()’

那之前类似 RouterModule.forRoot (rootRouterConfig, {useHash: true}),的这种写法该如何支持呢？

Will this support Universal(Server Side Rendering) in the future?

I'm submitting a...

[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

Current behavior

Some components just don't support universal currently.

Expected behavior

It would be very appreciate if this project support universal.Thanks!

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z

ng-zorro-antd version: X.Y.Z

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

InputNumber 可以只限制输入数字吗？

https://ng.ant.design/#/components/input-number
名义是 input number 但是没有限制。

文档是否有支持markdown的计划？

I'm submitting a...

[ ] Bug report  
[ ] Feature request
[x] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

Current behavior

目前showcase的文档是直接写在html中的（类似primeng），不知是否有有计划直接写markdown（类似antd）的计划？

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z

ng-zorro-antd version: X.Y.Z

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

表格分页page小于或等于0时，nzPageIndexChange会触发两次

I'm submitting a...

[ x] Bug report 
[ ] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

Current behavior

使用表格分页远程加载数据

Expected behavior

根据服务端分页要求传递页码

Minimal reproduction of the problem with instructions

当使用远程加载数据时，_current小于或等于0时，nzPageIndexChange事件会触发两次

What is the motivation / use case for changing the behavior?

后台分页规则不一，有的是从0开始的，虽然已经解决了该问题，但还是提一下！
补充下问题，页码从0开始时切换pageIndex或者pageSize都会触发两次请求数据的事件！

[BUG] card 进入路由时 nzNoHovering 闪现

I'm submitting a...

[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

Current behavior

当路由至一个带有：

<nz-card nzNoHovering="true">
</nz-card>

产生闪现：

体验问题，Menu组件导致整个布局抖动

https://ng.ant.design/#/components/menu

只展开当前父级菜单
控制菜单开合，点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。

Menu的 toggle会抖动.

nz-menu-item支持根据路由自动高亮

I'm submitting a...

[ ] Bug report  
[ x] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

Current behavior

在zn-menu-item中添加了路由后没法根据当前的默认路径自动高亮

Expected behavior

在默认跳转到指定路径时routerLinkActive匹配的路由能够自动高亮

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z

ng-zorro-antd version: X.Y.Z

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

“Rate 评分”控制怎么在使用过后恢复为0？

在官网的例子上操作了下好像不能恢复为0

如何更改颜色主题?

I'm submitting a...

[ ] Bug report  
[X] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

Expected behavior

如何更改颜色主题?

后面会不会增加侧边栏弹层的组件?

左右滑动的方式

the ng-zorro official site, with no input in the search bar, press backspace will occur an error

vendor.7345c6a74bffbc4b63fa.bundle.js:1 ERROR TypeError: this.remaining.startsWith is not a function
    at t.BkNc.t.peekStartsWith (vendor.7345c6a74bffbc4b63fa.bundle.js:1)
    at t.BkNc.t.consumeOptional (vendor.7345c6a74bffbc4b63fa.bundle.js:1)
    at t.BkNc.t.parseRootSegment (vendor.7345c6a74bffbc4b63fa.bundle.js:1)
    at t.BkNc.t.parse (vendor.7345c6a74bffbc4b63fa.bundle.js:1)
    at t.BkNc.t.parseUrl (vendor.7345c6a74bffbc4b63fa.bundle.js:1)
    at t.BkNc.t.navigateByUrl (vendor.7345c6a74bffbc4b63fa.bundle.js:1)
    at t.navigateTo (main.0d02cc9f28de90c3c0ec.bundle.js:1)
    at Object.handleEvent (main.0d02cc9f28de90c3c0ec.bundle.js:1)
    at Object._ [as handleEvent] (vendor.7345c6a74bffbc4b63fa.bundle.js:1)
    at Object.handleEvent (vendor.7345c6a74bffbc4b63fa.bundle.js:1)

期待中。

可惜不是沙发。

走马灯中自动轮播nzAutoPlay中在api里面p小写了,会让人误解,会出错

I'm submitting a...

[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z

ng-zorro-antd version: X.Y.Z

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

跟组件中引用体积过大

2m的体积，能否像material 那样分模块，在官方文档中好像没找到？能否告知一下 ，多谢

Please Don't Use Field `_prefixCls`.

I'm submitting a...

[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

Current behavior

@Component({
  selector     : 'nz-button-group',
  encapsulation: ViewEncapsulation.None,
  template     : `
    <div [ngClass]="_classMap" #groupWrapper>
      <ng-content></ng-content>
    </div>
  `,
  styleUrls    : []
})
export class NzButtonGroupComponent implements AfterContentInit {
  _size: NzButtonGroupSize;
  _prefixCls = 'ant-btn-group';
  _sizeMap = { large: 'lg', small: 'sm' };
  @ViewChild('groupWrapper') _groupWrapper: ElementRef;

Expected behavior

please don't use _prefixCls = 'ant-btn-group';

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

• class filed will consume memory when instance, simplify field will benefit performance.

• UI framework/component, should be welcome to developer just using COPY/PASTE command, simplify field will lead developer just focus on data associate field whitch commonly related to binding data.

• ui class name, html tag should simple behave as literal exactly. please use string function or string operator as less as possible. (developer can just find or replace what he need globally)

• i see some _prefixClswith string combine style. like [ant-tag-${this.nzColor}] : isPresetColor,this sames like less/scss problem. the real effect style should be ant-tag someofngcolor

fininally, i insist on simplify field. and _prefixCls field should be removed.

Environment

Angular version: X.Y.Z

ng-zorro-antd version: X.Y.Z

Browser:

- [ ] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX

For Tooling issues:
- Node version: XX  
- Platform:  

Others:

VSCODE代码片断已出发，坐等ng-zorro发布！

ng-zorro 的 vscode 代码片断：ng-zorro snippets

安装扩展

按 F1 输入 ext install ng-zorro-vscode 后回车。

如何使用?

你可以任意 .html、.ts 文件，输入 nz- 开头会自动出现在智能提醒列表当中；仅此而已！

Pagination QuickJumper bug

English is not my native language; please excuse typing errors.

when i input the first page or the last page, corresponding button not highlighted.

不知道是字体太小，细还是颜色太浅，好像挺难看清的。

不知道是字体太小，细还是颜色太浅，好像挺难看清的。

modal窗口可以用于展示Form吗？

我用文字可以，用了form布局就会乱，看起来像是height不够导致控件换行了

排队中....

用nz-input会与表单状态touched等字段冲突，这些字段无效果

I'm submitting a...

[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z

ng-zorro-antd version: X.Y.Z

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

期待

期待很久了，虽然没有源码，看了一下tabs的示例，动态增加tab标签，也只是数据源的增加，有实现能够动态创建一个tab，tab内容是一个其他的组件页面？是不是这种比较难实现？

官网文档展开全部代码没效果 chrome 60

官网文档展开全部代码没效果 chrome 60

ng build --prod --build-optimizer 出错

使用这个选项需要什么前提，只是基本工程，啥也没加。

ERROR in ./node_modules/rxjs/observable/BoundNodeCallbackObservable.js
Module build failed: TypeError: Cannot read property 'type' of undefined

示例页面文字描述错误

https://ng.ant.design/#/components/icon

是今天发布么？请问有计划时间表么？

menu异常错误

I'm submitting a...

[x ] Bug report 
[ ] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

Current behavior

menu需要区分是否有子项，遍历后浏览器会报一个错误。

console：

code：

layout.component.html

<nz-layout>
  <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
    <div class="logo" *ngIf="isCollapsed">
    </div>
    </div>
    <!-- 侧边拦 -->
    <ul nz-menu [nzTheme]="'dark'" [nzMode]="isCollapsed?'vertical':'inline'">
      <ng-template ngFor let-item [ngForOf]="links | async">
        <li nz-menu-item *ngIf="item.type === 'link'" [routerLink]="['/', item.state]">
          <span title><i class="anticon anticon-user"></i><span class="nav-text">{{item.name}}</span></span>
        </li>
        <li nz-submenu *ngIf="item.type === 'sub'">
          <span title><i class="anticon anticon-user"></i><span class="nav-text">{{item.name}}</span></span>
          <ul>
            <li nz-menu-item *ngFor="let subItem of item.children" [routerLink]="['/', item.state, subItem.state]">{{subItem.name}}</li>
          </ul>
        </li>
      </ng-template>
    </ul>
  </nz-sider>
  <nz-layout>

    <!-- 头部 -->
    <nz-header style="background: #fff; padding:0;">
      <i class="anticon trigger" [class.anticon-menu-fold]="!isCollapsed" [class.anticon-menu-unfold]="isCollapsed" (click)="isCollapsed=!isCollapsed"></i>
    </nz-header>

    <!-- 内容区 -->
    <nz-content style="margin:0 16px;">
      <nz-breadcrumb style="margin:12px 0;">
        <nz-breadcrumb-item *ngFor="let breadcrumb of  breadcrumbs" [routerLink]="[breadcrumb.url]">{{breadcrumb.name}}</nz-breadcrumb-item>
      </nz-breadcrumb>
      <div style="padding:24px; background: #fff; min-height: 480px;">
          <router-outlet></router-outlet>
      </div>
    </nz-content>
    <nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
  </nz-layout>
</nz-layout>

layout.component.ts

import { Component, OnInit, ChangeDetectionStrategy } from "@angular/core";
import {
  Router,
  ActivatedRoute,
  ActivatedRouteSnapshot,
  UrlSegment
} from "@angular/router";

import { Observable } from 'rxjs/Observable';
import "rxjs/add/operator/filter";
import "rxjs/add/operator/map";

@Component({
  selector: "app-layout",
  // changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: "./layout.component.html",
  styleUrls: ["./layout.component.scss"]
})
export class LayoutComponent implements OnInit {
  public breadcrumbs: Array<any> = [];

  private links: Observable<any>;

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {

    this.links = Observable.of([
      {
        state: "dashboard",
        name: "首页",
        type: "link",
        icon: "icon-shouye_shouye1"
      },
      {
        state: "backend-manage",
        name: "后台管理",
        type: "sub",
        icon: "icon-shouye_shouye1",
        children: [
          { state: "vender", name: "供应商管理" },
          { state: "brand", name: "品牌管理" }
        ]
      },
      {
        state: "system-setting",
        name: "系统设置",
        type: "sub",
        icon: "icon-xitongshezhi",
        children: [
          { state: "user", name: "用户管理" },
          { state: "role", name: "角色管理" },
          { state: "navigation", name: "菜单管理" },
          { state: "bibles", name: "字典管理" }
        ]
      }
    ]);
  }

  ngOnInit() {
    this.parseRoute(this.router.routerState.snapshot.root);
    this.router.events.subscribe(event => {
      this.breadcrumbs = [];
      this.parseRoute(this.router.routerState.snapshot.root);
    });
  }

  parseRoute(node: ActivatedRouteSnapshot) {
    if (node.data["title"]) {
      let urlSegments: UrlSegment[] = [];
      node.pathFromRoot.forEach(routerState => {
        urlSegments = urlSegments.concat(routerState.url);
      });
      const url = urlSegments
        .map(urlSegment => {
          return urlSegment.path;
        })
        .join("/");
      this.breadcrumbs.push({
        name: node.data["title"],
        url: "/" + url
      });
    }

    if (node.firstChild) {
      this.parseRoute(node.firstChild);
    }
  }
}

实现效果图：