Angular 角度+；引导导航条问题_Angular

Angular 角度+；引导导航条问题

angular

Angular 角度+；引导导航条问题,angular,Angular,我使用的是Angular 4和bootstrap 3.3.7。我遇到的问题是，尽管导航栏像预期的那样折叠成“汉堡包”，但汉堡包对用户的点击没有反应。我在这里找到了一个非角度的工作示例但即使当我用工作示例中的nav元素替换我的nav元素时，复制的navbar汉堡也没有响应这是我的index.html <!doctype html> <html> <head> <meta charset="utf-8"> <base hre

我使用的是Angular 4和bootstrap 3.3.7。我遇到的问题是，尽管导航栏像预期的那样折叠成“汉堡包”，但汉堡包对用户的点击没有反应。我在这里找到了一个非角度的工作示例

但即使当我用工作示例中的nav元素替换我的nav元素时，复制的navbar汉堡也没有响应

这是我的index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <!-- index.html -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();   
    });
    </script>
</head>
<body>
  <app-root>Loading...</app-root>
</body>


$（文档）.ready（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）；
});

想法

在Angular 4中，按钮应如下所示：

  <button class="navbar-toggler navbar-toggler-right" type="button" (click)="isCollapsed = !isCollapsed">
    <span class="navbar-toggler-icon"></span>
  </button>

在app.module.ts文件中，您需要

从'@ng bootstrap/ng bootstrap'导入{NgbModule}

并将

NgbModule.forRoot（）添加到NgModule下的imports部分
简而言之，Angular 4使用此功能使汉堡按钮正常工作
 在Angular 4中，按钮应如下所示：
  <button class="navbar-toggler navbar-toggler-right" type="button" (click)="isCollapsed = !isCollapsed">
    <span class="navbar-toggler-icon"></span>
  </button>

在app.module.ts文件中，您需要从'@ng bootstrap/ng bootstrap'导入{NgbModule}
并将NgbModule.forRoot（）添加到NgModule下的imports部分
简而言之，Angular 4使用此功能使汉堡按钮正常工作 你的问题到底是什么？你能提供一个plunker吗？我希望汉堡包图标是有响应的，当我点击它时，我希望看到我的其他导航项目显示/隐藏。下面是安吉拉·潘的答案，你的问题是什么？你能提供一个plunker吗？我希望汉堡包图标是有响应的，当我点击它时，我希望看到我的其他导航项目显示/隐藏。安吉拉·帕尼（Angela PanI）给出了下面的答案，她做出了所有建议的修改，而且几乎做到了。汉堡包图标是不同的，它不是3个水平条，它总是存在。我只希望在需要的时候看到它。我更接近了，谢谢！顺便说一句，我使用的是bootstrap 3.3.7而不是4。你可以在这里看到结果嗨，我的应用程序中的汉堡图标只有在宽度变小时才会出现。它是三个单杠。但我看到你解决了你的问题。伟大的除了汉堡包图标的外观和其可见时，大部分问题都已解决。你使用的是Bootstrap4吗？我做了所有建议的更改，现在差不多了。汉堡包图标是不同的，它不是3个水平条，它总是存在。我只希望在需要的时候看到它。我更接近了，谢谢！顺便说一句，我使用的是bootstrap 3.3.7而不是4。你可以在这里看到结果嗨，我的应用程序中的汉堡图标只有在宽度变小时才会出现。它是三个单杠。但我看到你解决了你的问题。伟大的除了汉堡包图标的外观和其可见时，大部分问题都已解决。您使用的是bootstrap4吗？
npm install --save @ng-bootstrap/ng-bootstrap