Question

我有一个没有Jquery的Angular项目。我想使用带有mdbootstrap的导航栏，但是当我在html中编写mdbootstrap代码时，崩溃将不起作用。这是我的html内容。

xxx.jpg(123 bytes),
xxx.png(456 bytes),
xxx.pdf(123456 bytes),

Answer 1

documentation并不是很友好，但是仍然遍历了基本的导航栏...类使用告诉它何时从汉堡菜单转换为扩展形式（在我们的例子中为navbar-expand-lg） ;在下面的示例中，其余只是伪文本。

相关的 HTML ：

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark pink ie-nav" [containerInside]="false">
    <mdb-navbar-brand>
        <a class="logo navbar-brand" href="#"><strong>Navbar</strong></a>
    </mdb-navbar-brand>
    <links>
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active waves-light" mdbWavesEffect>
                <a class="nav-link">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item waves-light" mdbWavesEffect>
                <a class="nav-link">Features</a>
            </li>
            <li class="nav-item waves-light" mdbWavesEffect>
                <a class="nav-link">Pricing</a>
            </li>
            <li class="nav-item waves-light" mdbWavesEffect>
                <a class="nav-link">Opinions</a>
            </li>
        </ul>
        <ul class="navbar-nav nav-flex-icons">
            <li class="nav-item waves-light" mdbWavesEffect>
                <a class="nav-link"><mdb-icon fab icon="facebook-f"></mdb-icon></a>
            </li>
            <li class="nav-item waves-light" mdbWavesEffect>
                <a class="nav-link"><mdb-icon fab icon="twitter"></mdb-icon></a>
            </li>
            <li class="nav-item waves-light" mdbWavesEffect>
                <a class="nav-link"><mdb-icon fab icon="instagram"></mdb-icon></a>
            </li>
        </ul>
    </links>
</mdb-navbar>

相关的 CSS ：

.navbar-toggler-icon{ border:2px solid red;}
.navbar-brand, .nav-link{color:red !important;}

完成working stackblitz here

Answer 2

我正在发布使用Angular Material库的最佳方法，以使sidenav成为应用程序的主要导航。您无需安装其他任何库，然后Angular Material

npm i --save @angular/material @angular/cdk @angular/animations

ng add @angular/material

以下是代码：https://stackblitz.com/edit/angular-c8gpuh

这是一个视频教程：https://www.youtube.com/watch?v=Q6qhzG7mObU

在您的app.component.html中：

<sidenav-autosize-example>
   <router-outlet></router-outlet>
</sidenav-autosize-example>

并记住将nessesery模块导入您的项目：

import { NgModule } from '@angular/core';

import { MatSidenavModule, MatToolbarModule, MatButtonModule, MatIconModule, MatProgressBarModule } from '@angular/material';


@NgModule({
    declarations: [],
    imports: [
        MatSidenavModule,
        // MatToolbarModule,
        MatButtonModule,
        MatIconModule,
        // MatProgressBarModule,
    ],
    exports: [
        MatSidenavModule,
        // MatToolbarModule,
        MatButtonModule,
        MatIconModule,
        // MatProgressBarModule,
    ],
})
export class MaterialModule { }

崩溃在Angular导航栏中不起作用

2 个答案: