Ng-zorro-antd: menu支持传入树结构数据

[102010cncger]

对angular4不是很熟悉,angularjs我可能就用$compile来实现了,
在这个版本如何根据下面的数据显示菜单呢?或者后续是否有支持
类似
``````````

`` ```````````` export const MENUS: Menu[] = [ {id: 'dashboard', name: 'Dashboard', url: '/dashboard', childs: []}, { id: 'erros', name: 'Erro Page', url: '', childs: [ {id: '404', name: '404', url: '/404', childs: []}, {id: '500', name: '500', url: '/500', childs: [{id: 'dashboard', name: 'Dashboard', url: '/dashboard', childs: []}, { id: 'erros1', name: 'Erro Page', url: '', childs: [ {id: '4041', name: '404', url: '/404', childs: []}, {id: '5001', name: '500', url: '/500', childs: [{ id: 'erros1', name: 'Erro Page', url: '', childs: [ {id: '4041', name: '404', url: '/404', childs: []}, {id: '5001', name: '500', url: '/500', childs: [{ id: 'erros1', name: 'Erro Page', url: '', childs: [ {id: '4041', name: '404', url: '/404', childs: []}, {id: '5001', name: '500', url: '/500', childs: []} ] }]} ] }]} ] }]} ] } ];

[vthinkxie]

use *ngFor please

[102010cncger]

not effect perfect, all 2nd level element Left margin is 24px. please help

i use like this
`````````````

````````````````````

`````````````````
import {Component, Input, OnInit} from '@angular/core';

@Component({
selector: '[app-recursive-menu]',
templateUrl: './recursive-menu.component.html',
styleUrls: ['./recursive-menu.component.css']
})
export class RecursiveMenuComponent implements OnInit {

constructor() {
}

ngOnInit() {
}

@Input() menus: any;
}

{{menu.name}}

Team11111111111

``````````````````

[vthinkxie]

Hi @102010cncger , I just checked the source code, subMenu can not be accessed when wrapped in the other component, so the padding level is wrong with recursive component.
https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/src/components/menu/nz-submenu.component.ts#L152
You may need to handle the padding style yourself for the time being.
We will talk about it later, thanks for your feedback.

[noob9527]

@102010cncger @vthinkxie

DON'T DO THIS, SEE MY COMMENT BELOW

I've just found a tricky way to do this,
by the way, I don't exactly know what does ɵen mean,
why export internal component as these symbols?
Is there anyone can explain that to me?

import { AfterViewInit, Component, Input, OnInit, QueryList, ViewChildren } from '@angular/core';
import { ɵen as NzSubMenuComponent } from 'ng-zorro-antd';

@Component({
  selector: 'app-menu-item',
  template: `
    <li nz-menu-item *ngIf="!menuItem.children">
      <a href="">
        {{menuItem.title}}
      </a>
    </li>
    <li nz-submenu *ngIf="menuItem.children">
      <span title>
        {{menuItem.title}}
      </span>
      <ul>
        <app-menu-item
          [menuItem]="item"
          *ngFor="let item of menuItem.children"
        >
        </app-menu-item>
      </ul>
    </li>
  `,
  styleUrls: ['./menu-item.component.css']
})
export class MenuItemComponent implements AfterViewInit {

  level = 1;
  @Input() menuItem: any;
  @ViewChildren(NzSubMenuComponent) nzSubMenus: QueryList<NzSubMenuComponent>;
  @ViewChildren(MenuItemComponent) subMenus: QueryList<MenuItemComponent>;

  ngAfterViewInit() {
    if (this.subMenus.length) {
      this.subMenus
        .filter(x => x !== this)
        .forEach(menu => {
          setTimeout(_ => {
            menu.level = this.level + 1;
            menu.syncNzSubMenusLevel();
          });
        });
    }
  }

  syncNzSubMenusLevel() {
    if (this.nzSubMenus.length) {
      this.nzSubMenus
        .forEach(menu => {
          menu.level = this.level;
        });
    }
  }

}

[vthinkxie]

@noob9527 Thanks a lot. ɵen is name after compile, it will be fixed next version.

[LinPoLen]

ɵen the ɵ is used for private class export. and the en is the alias of the export class

[dyh333]

mark it

[noob9527]

follow by my previous comment
in the latest release(0.6.7), you can import NzSubMenuComponent directly from ''ng-zorro-antd'', so u should change this line

import { ɵen as NzSubMenuComponent } from 'ng-zorro-antd';
to
import { NzSubMenuComponent } from 'ng-zorro-antd';

[hatakawas]

has the recursive component been supported?

[vthinkxie]

try to fixed in version 0.7.0 but failed
https://github.com/NG-ZORRO/ng-zorro-antd/blob/5c0716107e0955b034a2d9ce75463ff3b0e9fdb6/components/menu/style/index.less#L372
the design of ant design can not insert any self define component into menu, it will break the style define.

[zhhb]

I has the same problem，thx for @noob9527 @vthinkxie

[candy4290]

i have the same problem.

• {{menu.title}}
• {{menu.title}}

---

this.menus = [(
{
title: '用户',
icon: 'anticon anticon-user',
open: true,
selected: false,
disabled: false,
items: [
{
title: '用户1',
icon: 'anticon anticon-user',
selected: false,
disabled: false,
items: [
{
title: '用户11',
icon: 'anticon anticon-user',
selected: true,
disabled: false
},
{
title: '用户12',
icon: 'anticon anticon-user',
selected: false,
disabled: false
}
]
},
{
title: '用户2',
icon: 'anticon anticon-user',
selected: false,
disabled: false
}
]
},
{
title: 'Team',
icon: 'anticon anticon-team',
selected: false,
disabled: false,
items: [
{
title: 'Team1',
icon: 'anticon anticon-team',
selected: false,
disabled: false,
},
{
title: 'Team2',
icon: 'anticon anticon-team',
selected: false,
disabled: false,
}
]
},
{
title: 'test',
icon: 'anticon anticon-team',
selected: false,
disabled: false
}
)];

[dyh333]

@vthinkxie does it fixed in the lastest version?

[dyh333]

does it fixed in the lastest version(v7.0.0)?

[vthinkxie]

@dyh333 plz read the latest doc