时间戳

首页 > 解决方案 > 如何使用 Nebular UI Kit 嵌套组件？

angular - 如何使用 Nebular UI Kit 嵌套组件？

问题描述

我在我的 Angular 应用程序中使用 Nebular UI Kit，并希望在主页组件内嵌套一个标题组件。由于该属性默认占据整个页面，因此我的组件是两个全尺寸屏幕，彼此重叠。如何在其他组件中正确嵌套 Nebular 组件？

我尝试从标题组件中删除属性，然后嵌套在主组件中的属性下方，但是标题没有显示在主组件中。一直未能找到有效的解决方案。

这是我目前拥有的（一切正常，但主组件将标题组件显示为主组件其余部分之上的全尺寸窗口）：

// Header Component / <app-header>
<nb-layout>
<nb-layout-header>
  <nb-actions size="medium">
    <nb-action routerLink="/page-1">Page 1</nb-action>
    <nb-action routerLink="/page-2">Page 2</nb-action>
  </nb-actions>
</nb-layout-header>
</nb-layout>

// Home Component
<app-header></app-header>
<nb-layout>
<nb-layout-column>
Column 1
</nb-layout-column>
</nb-layout>

标签： angulartypescriptnebular

解决方案

我认为问题不在于标题，而在于您使用<nb-layout>了两次。

尝试这样的方法，其中标头未包含在 nb-layout 中：

标题组件：

<nb-layout-header>
  <nb-actions size="medium">
    <nb-action routerLink="/page-1">Page 1</nb-action>
    <nb-action routerLink="/page-2">Page 2</nb-action>
  </nb-actions>
</nb-layout-header>

家庭组件：

<nb-layout>
<app-header></app-header>
<nb-layout-column>
Column 1
</nb-layout-column>
</nb-layout>

推荐阅读