Nebular 通用侧边栏页脚标签未正确包装菜单项

Question

我尝试结合使用 nebular 文档和 ngx-admin 示例来创建侧边栏页脚。使用相同的结构设计 @theme/layouts/one-column 并在那里创建了侧边栏页脚，因为它是在整个应用程序中显示的正确位置：

//@theme/layouts/one-column/one-column.layouts.ts

import { Component } from '@angular/core';

@Component({
    selector: 'ngx-one-column-layout',
    styleUrls: ['./one-column.layout.scss'],
    template: `
        <nb-layout windowMode>
            <nb-layout-header fixed>
                <ngx-header></ngx-header>
            </nb-layout-header>
            <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
                <ng-content select="nb-menu"></ng-content>
                <nb-sidebar-footer>
                    <ng-content select=".nb-menu-footer"></ng-content>
                </nb-sidebar-footer>
            </nb-sidebar>
            <nb-layout-column>
                <ng-content select="router-outlet"></ng-content>
            </nb-layout-column>
            <nb-layout-footer fixed>
                <ngx-footer></ngx-footer>
            </nb-layout-footer>
        </nb-layout>
    `,
})
export class OneColumnLayoutComponent {}

在 <nb-sidebar-footer> 中，我添加了 <ng-content select=".nb-menu-footer"></ng-content>，然后在我的 pages.component.ts 中，我添加了 nb-menu 以及代表预期页脚项目的 items 属性：

// pages.component.ts
@Component({
    selector: 'app-pages',
    styleUrls: ['./pages.component.scss'],
    template: `
        <ngx-one-column-layout>
            <nb-menu [items]="menu"></nb-menu>
            <nb-menu class=".nb-menu-footer" [items]="menuFooter"></nb-menu>
            <router-outlet></router-outlet>
        </ngx-one-column-layout>
    `,
})


menuFooter = [
  {
      title: 'О сайте',
      icon: 'heart',
      link: '/pages/imprint/overview',
      home: false,
  }
]

但我最终得到了这样的东西：

如何正确放置 nb-menu 项，如您所见 nb-sidebar-footer 包裹 <ng-content select=".nb-menu-footer"></ng-content>

StackBlitz StackBlitz Seed Project

npm，节点，OS，浏览器

node: v12.0.0
npm: 6.9.0
OS: Windows 10
Browser: Chrome

Angular,星云

"@angular/cdk": "^11.2.3",
"@angular/common": "~11.2.3",
"@angular/compiler": "~11.2.3",
"@angular/core": "~11.2.3",
"@angular/forms": "~11.2.3",
"@angular/localize": "~11.2.3",
"@angular/platform-browser": "~11.2.3",
"@angular/platform-browser-dynamic": "~11.2.3",
"@angular/router": "~11.2.3",
"@nebular/auth": "^7.0.0",
"@nebular/eva-icons": "7.0.0",
"@nebular/security": "^7.0.0",
"@nebular/theme": "^7.0.0",

Answer 1

我在 <nb-sidebar-footer> 标签中添加了一个自定义组件来添加页脚。像下面的例子：

<nb-layout windowMode>
  <nb-layout-header fixed>
    <ngx-header></ngx-header>
  </nb-layout-header>

  <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive start>
      <ng-content select="nb-menu"></ng-content>

      <nb-sidebar-footer>
        <custom-sidebar-footer></custom-sidebar-footer>
      </nb-sidebar-footer>
  </nb-sidebar>

  <nb-layout-column>
    <ng-content select="router-outlet"></ng-content>
  </nb-layout-column>

  <nb-layout-footer fixed>
    <ngx-footer></ngx-footer>
  </nb-layout-footer>
</nb-layout>

和页脚的自定义组件：

自定义-footer.component.html

<nb-menu [items]="menuFooter"></nb-menu>

自定义-footer.component.ts

  menuFooter : NbMenuItem[] = [{
     title: 'О сайте',
     icon: 'heart',
     link: '/pages/imprint/overview',
     home: false,
  }];

Nebular 通用侧边栏页脚标签未正确包装菜单项

Nebular common sidebar footer tag does not wrap the menu items correctly

angular

nebular

ngx-admin