1

Pessoas, estou tentando fazer um componente de navbar utilizando Bootstrap 4 e quando eu coloco no mobile o botão para mostrar o resto do menu ele não funciona

quando faço com um HTML, CSS e JS funciona tranquilo, mas quando tento "migrar" para o angular não funciona.

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
  "ng-bootstrap-exemple": {
  "root": "",
  "sourceRoot": "src",
  "projectType": "application",
  "prefix": "app",
  "schematics": {},
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/ng-bootstrap-exemple",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
          "src/styles.css",
          {
            "input": "./node_modules/bootstrap/dist/css/bootstrap.css"
          }
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            }
          ]
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "ng-bootstrap-exemple:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "ng-bootstrap-exemple:build:production"
        }
      }
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "ng-bootstrap-exemple:build"
      }
    },
    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.spec.json",
        "karmaConfig": "src/karma.conf.js",
        "styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
          "src/styles.css"
        ],
        "scripts": [],
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ]
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": [
          "src/tsconfig.app.json",
          "src/tsconfig.spec.json"
        ],
        "exclude": [
          "**/node_modules/**"
        ]
      }
    }
  }
},
"ng-bootstrap-exemple-e2e": {
  "root": "e2e/",
  "projectType": "application",
  "prefix": "",
  "architect": {
    "e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": {
        "protractorConfig": "e2e/protractor.conf.js",
        "devServerTarget": "ng-bootstrap-exemple:serve"
      },
      "configurations": {
        "production": {
          "devServerTarget": "ng-bootstrap-exemple:serve:production"
        }
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": "e2e/tsconfig.e2e.json",
        "exclude": [
          "**/node_modules/**"
        ]
      }
     }
    }
   }
  },
   "defaultProject": "ng-bootstrap-exemple"
  }

O HTML do Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" tabindex="-1" aria- 
                disabled="true">Disabled</a>
    </li>
  </ul>
 </div>
 </nav>

navbar.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css'] 
})
export class NavbarComponent implements OnInit {

constructor() { }

 ngOnInit() {
  }

}

Até adicionei os scripts do Bootstrap mas mesmo assim não fuinciona

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
    integrity="sha384- 
    q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
    crossorigin="anonymous"></script>
  <script 
    src="https://cdnjs.cloudflare.com/ajax/libs
      /popper.js/1.14.6/umd/popper.min.js" integrity="sha384- 
      wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" 
      crossorigin="anonymous"></script>
  <script 
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1
         /js/bootstrap.min.js" integrity="sha384- 
         B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 
       crossorigin="anonymous"></script>
4
  • 1
    Onde adicionou estes arquivos cdn? Lembrando que é altamente "contra-indicado" utilizar frameworks CSS que utilizam jQuery com frameworks Javascript como Vue, Angular, etc... por N motivos, como conflitos para dar só um exemplo.
    – LeAndrade
    Commented 26/01/2019 às 23:22
  • @LeAndrade adicionei os cdn tanto no navbar.component.html e ate no index.html, porem não tive resultado, tentei utilizar o rgx-bootstrap, porem nao achei algo que possa utilizar um navbar
    – user135751
    Commented 26/01/2019 às 23:25
  • 1
    Cara estranho, pq se colocou no index era para funcionar, mas enfim, dá uma olhada neste post na medium que tem um exemplo de implementação do hamburguer sem jquery: medium.com/@tiboprea/…
    – LeAndrade
    Commented 26/01/2019 às 23:36
  • @LeAndrade Irei verificar!
    – user135751
    Commented 26/01/2019 às 23:36

1 Resposta 1

0

Seu problema é que no data-target do button vc escreveu o valor errado, sem o # identificador do target. O valor para fazer o target corretamente tem que ter um # na frente do nome.

Veja que vc colocou assim:

data-target="navbarNav"

Deveria estar assim, com o # na frente do valor:

data-target="#navbarNav"

Veja que eu não mudei nada no seu código, só coloquei o # no valor do data-target do button e a navbar passou a funcionar como o esperado!

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
        </ul>
    </div>
</nav>

Você deve fazer log-in para responder a esta pergunta.