如何使用Nebular UI套件嵌套组件

Question

我在我的angular应用程序中使用Nebular UI Kit，并希望在主页组件中嵌套一个头部组件。由于默认情况下该属性占据整个页面，因此我的组件是两个全尺寸的屏幕。如何正确地将星云组件嵌套在其他组件中？

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

以下是我目前所拥有的(一切正常，但主组件在主组件的其余部分上显示标题组件为全尺寸窗口(：

// 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>

Answer 1

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

试试这样的东西，在nb布局中没有封装标题：

标头组件：

<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>