时间戳

首页 > 解决方案 > 如何从不同的组件加载 Nebular Angular 6 中的菜单？

angular - 如何从不同的组件加载 Nebular Angular 6 中的菜单？

问题描述

我正在学习 Angular。我已经创建了骨架模块，并且拥有骨架.html、.ts、.css 文件。我正在尝试使用路由器从 app.component.html 文件加载skeleton.component。

我在skeleton组件中有菜单，但它不适合正确的位置。

app.component.html

<nb-layout>
    <nb-layout-header fixed>
        <div class="container">
            <div class="row">
                <h3>Working</h3>
            </div>
            <div class="row">
                <div>
                <a routerLink="/home" class="nb-home"></a>
                <a (click)="goBack()" class="nb-arrow-left"></a>
                <nb-search class="search" type="rotate-layout"></nb-search>
            </div>
        </div>
    </div>
    </nb-layout-header>
    <nb-layout-column>
        <router-outlet></router-outlet>
    </nb-layout-column>
</nb-layout>

skeleton.component.html

<nb-sidebar >
    <nb-menu [items]="items">
    </nb-menu>
</nb-sidebar>
<nb-layout-column>
        <!--router-outlet></router-outlet-->
</nb-layout-column>

而且我拥有与模块相关的所有其他组件skeleton。我正在尝试将这些组件加载到<nb-layout-column>. 但它正在渲染另一个组件，但侧面菜单正在消失。

骨架子.html

<div class="row">
    <div class="col-md-3 col-sm-4 col-xs-6"  *ngFor="let x of imgObj; index as i;">
            <nb-card>
                    <nb-card-header>{{x['title']}}</nb-card-header>
            <nb-card-body class="regss">
                <div class="content" >{{x['content']}}</div>

                <img class="imgs" [src]="x['url']" alt="x['alt']" >

            </nb-card-body>
        </nb-card>
    </div>

</div>

你们能告诉我我的代码出了什么问题吗？

标签： angular

解决方案

推荐阅读