导航栏下拉菜单在 Angular 4 中不起作用

Question

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

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

请建议我应该怎么做才能使下拉菜单在我们单击或将鼠标悬停在父级上时显示。在这种情况下，菜单 Has submenu 包含子菜单，但没有显示

Answer 1

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

请将此代码添加到 src/index.html 文件的 body 标签后

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>

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