Question

我使用以下方法安装了dotnet SPA模板：

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

然后我使用以下方法创建了一个新的Angular应用程序：

dotnet new angular

在恢复包裹，构建和运行时，我注意到模板的导航栏有些奇怪。 Picture。导航栏设置在页面的侧面，而不是正常的顶部导航栏。我的愿望是固定的顶级导航栏。

在app.component.html中，导航栏和路由器插座配置如下：

<div class='container-fluid'>
    <div class='row'>
        <div class='col-sm-3'>
            <nav-menu></nav-menu>
        </div>
        <div class='col-sm-9 body-content'>
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

显然，我认为问题是导航菜单在col-sm-3范围内且路由器插座位于col-sm-9范围内。我改变它，以便导航菜单在自己的行中具有全宽列，与路由器插座相同：

<div class='container-fluid'>
    <div class='row'>
        <div class='col-sm-12'>
            <nav-menu></nav-menu>
        </div>
    </div>
    <div class="row">
        <div class='col-sm-12 body-content'>
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

然而，这并没有解决问题。相反，navmenu仍然在屏幕的一侧，并掩盖了我的其余内容。 Picture

我在app.component.html中尝试了各种其他HTML配置，但没有成功让导航栏工作。

这是navbar html：

<div class='main-nav'>
    <div class='navbar navbar-inverse'>
        <div class='navbar-header'>
            <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </button>
            <a class='navbar-brand' [routerLink]="['/home']">Brand</a>
        </div>
        <div class='clearfix'></div>
        <div class='navbar-collapse collapse'>
            <ul class='nav navbar-nav'>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/home']">
                        <span class='glyphicon glyphicon-home'></span> Home
                    </a>
                </li>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/counter']">
                        <span class='glyphicon glyphicon-education'></span> Counter
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

我还没有触及项目中的任何其他内容，因此如果您想尝试一下，在Visual Studio中重新创建此问题应该非常简单...

有关在此项目模板中获取有效的顶部导航栏的任何想法吗？

Answer 1

在boot-client.ts中添加 import'bootstrap';

运行webpack

Answer 2

如果开始一个新项目，您可以使用以下模板：

https://github.com/LiverpoolOwen/Angular-Dotnet-Core-template-with-Bootstrap-navbar

这是JavaScript服务模板的副本，但它使用引导导航栏而不是自定义侧面导航菜单。

Bootstrap NavBar无法在.Net Core Angular SPA模板

2 个答案: