Question

我是一个非常初学者或刚刚开始使用Angular 4.因此，作为学习的一部分，我尝试创建一些简单的组件。所以我尝试了一个bootstrap导航栏。这是Navbar的代码

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Test Menu</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Has submenu
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>

                <li class="nav-item" [routerLinkActive]="['active']">
                    <a class="nav-link" [routerLink]="'/engagement']">Engagement</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" dropdownToggle>
                        System
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown" *dropdownMenu>
                        <a class="dropdown-item" [routerLink]="['/admin/users']">Manage Users</a>
                        <a class="dropdown-item" [routerLink]="['/admin/servers']">Manage Servers</a>
                        <a class="dropdown-item" [routerLink]="['/admin/logs']">View Application Logs</a>
                    </div>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>

以下是构造函数部分

import { Component, OnInit } from '@angular/core';
import { BsDropdownMenuDirective } from 'ngx-bootstrap';
import * as $ from 'jquery';

@Component({
    selector: 'nav-menu',
    templateUrl: './navmenu.component.html',
    styleUrls: ['./navmenu.component.css']
})
export class NavMenuComponent implements OnInit {
    ngOnInit(): void {

    }

}

但是在我的应用程序组件html中我使用了这个选择器，菜单显示但是下拉列表不起作用或者它没有显示下拉菜单的下拉列表部分。

这是我的app.component.html，其中我使用菜单

<nav-menu></nav-menu>
<div class='container-fluid'>
  <router-outlet></router-outlet>
</div>

请建议我在点击或鼠标悬停在父级上方时显示下拉菜单。在这种情况下，菜单有子菜单包含子菜单，但不显示

Answer 1

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

请在body标记

之后将此代码添加到src / index.html文件中

Answer 2

如果您使用angular和mdbootsrap，这对我有用：

<li class="nav-item dropdown" dropdown *ngIf="isAuthorized" >
    <a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-effect waves-light clear-bg">
                <span class="nowrap"><i class="fa fa-user"></i>{{displayName}}&nbsp;<span class="caret"></span></span>
    </a>
    <div *dropdownMenu class="dropdown-menu drop-menu-right dropdown dropdown-info dropdown-clear" role="menu">
        <a class='dropdown-item waves-effect waves-light link-item-clear' mdbRippleRadius [routerLink]="['/profile']" href="#" dropdownToggle>Profile</a>
        <a class='dropdown-item waves-effect waves-light link-item-clear' mdbRippleRadius (click)="logout()" href="#" dropdownToggle>Logout</a>
    </div>                      
</li>

希望这有助于其他人。这比我想象的要难得多。

Navbar下拉列表无法在Angular 4中运行

2 个答案: