如何使用Nebular嵌套组件？

Question

我在我的angular应用程序中使用Nebular，并希望在主页组件中嵌套一个header组件。由于默认情况下该属性占据了整个页面，因此我的组件是两个完全大小的屏幕叠加在一起。如何在其他组件中正确地嵌套Nebular组件？

我尝试从header组件中删除属性，然后在home组件中的属性下面嵌套，但是header不显示在home组件中。找不到一个有效的解决方案。

这是我目前所拥有的(一切正常，但是home组件在home组件的其余部分上面显示一个完整大小的窗口)：

// 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-layout中：

Header组件：

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