首页 新闻 搜索 专区 学院

angular innerHtml Ngzorro丢失样式

0
悬赏园豆:30 [待解决问题]

想用Ngzorro做一个动态生成的菜单,官方例子都是写死的。

Html字符串拼接出来了,如果直接写在HTML里就有样式,通过innerHtml就没有样式了。

拼接出来的Html代码如下。

<ul nz-menu [nzMode]="'inline'" style="height:auto" >
<li nz-submenu>
<div menuEvent title><span type="laptop">用户管理</span></div>
<ul><li nz-menu-item><div menuEvent><span>用户维护</span>
</div></li></ul></li></ul><ul nz-menu [nzMode]="'inline'" style="height:auto" >
<li nz-submenu><div menuEvent title><span type="laptop">微信管理</span>
</div>
</li>
</ul>

求大神帮忙。

BHongyi的主页 BHongyi | 初学一级 | 园豆:77
提问于:2020-08-06 17:54
< >
分享
所有回答(1)
0

<ul nz-menu nzMode="inline" nzTheme="dark">
<ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menus }"></ng-container>
<ng-template #menuTpl let-menus>
<ng-container *ngFor="let menu of menus">
<li *ngIf="!menu.items" [nzPaddingLeft]="menu.level * 24" nz-menu-item>
<a routerLink={{menu.routerLink}}> <i nz-icon [nzType]="menu.icon"></i><span>{{menu.desc?menu.desc:menu.label}}</span></a>
</li>
<li *ngIf="menu.items" nz-submenu [nzPaddingLeft]="menu.level * 24" [nzTitle]="menu.desc?menu.desc:menu.label" [nzIcon]="menu.icon"
>
<ul>
<ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menu.items }"></ng-container>
</ul>
</li>
</ng-container>
</ng-template>
</ul>

meus组装成官网的格式就好啦

天胡弟弟 | 园豆:208 (菜鸟二级) | 2020-08-14 16:00

可以的 但是这个菜单级(3级菜单,4级菜单) 可以做到动态吗?

支持(0) 反对(0) BHongyi | 园豆:77 (初学一级) | 2020-08-14 16:05

@BHongyi: 可以啊,层级取决于你构造的返回值,这个递归显示的

支持(0) 反对(0) 天胡弟弟 | 园豆:208 (菜鸟二级) | 2020-08-18 08:58
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册