कोणीय

Question

में बूटस्ट्रैप 4 में नवरबार को टॉगल नहीं कर सकता है बूटरस्ट्रैप 4 का उपयोग करके कोणीय 4 में मोबाइल स्क्रीन का आकार बदलने पर मैं नौसेना टॉगल क्यों नहीं कर सकता। मैंने इसे स्क्रिप्ट और शैलियों में कोणीय क्ली में शामिल किया, बूटस्ट्रैप से नोड मॉड्यूल। क्या मेरे कोड में कुछ याद आ रही है? कृपया नीचे जांचें। क्या वहाँ कुछ गड़बड़ है? कृपया मदद

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> 
    <a class="navbar-brand" href="#">Dashboard</a> 
    <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarsExampleDefault"> 
    <ul class="navbar-nav mr-auto"> 
     <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="#">Settings</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Profile</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Help</a> 
     </li> 
    </ul> 
    <form class="form-inline mt-2 mt-md-0"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    </div> 
</nav> 

.angular-cli.json

"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
    ], 
    "scripts": [ 

    "../node_modules/popper.js/dist/umd/popper.min.js", 
    "../node_modules/jquery/dist/jquery.min.js", 
    "../node_modules/bootstrap/dist/js/bootstrap.min.js" 

    ], 

package.json

 { 
    "name": "dashboard2", 
    "version": "0.0.0", 
    "license": "MIT", 
    "scripts": { 
    "ng": "ng", 
    "start": "ng serve", 
    "build": "ng build", 
    "test": "ng test", 
    "lint": "ng lint", 
    "e2e": "ng e2e" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/animations": "^4.0.0", 
    "@angular/common": "^4.0.0", 
    "@angular/compiler": "^4.0.0", 
    "@angular/core": "^4.0.0", 
    "@angular/forms": "^4.0.0", 
    "@angular/http": "^4.0.0", 
    "@angular/platform-browser": "^4.0.0", 
    "@angular/platform-browser-dynamic": "^4.0.0", 
    "@angular/router": "^4.0.0", 
    "bootstrap": "^4.0.0-beta", 
    "core-js": "^2.4.1", 
    "jquery": "^3.2.1", 
    "popper.js": "^1.12.5", 
    "rxjs": "^5.4.1", 
    "zone.js": "^0.8.14" 
    }, 
    "devDependencies": { 
    "@angular/cli": "1.2.7", 
    "@angular/compiler-cli": "^4.0.0", 
    "@angular/language-service": "^4.0.0", 
    "@types/jasmine": "~2.5.53", 
    "@types/jasminewd2": "~2.0.2", 
    "@types/node": "~6.0.60", 
    "codelyzer": "~3.0.1", 
    "jasmine-core": "~2.6.2", 
    "jasmine-spec-reporter": "~4.1.0", 
    "karma": "~1.7.0", 
    "karma-chrome-launcher": "~2.1.1", 
    "karma-cli": "~1.0.1", 
    "karma-coverage-istanbul-reporter": "^1.2.1", 
    "karma-jasmine": "~1.1.0", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "protractor": "~5.1.2", 
    "ts-node": "~3.0.4", 
    "tslint": "~5.3.2", 
    "typescript": "~2.3.3" 
    } 
} 

Answer 1

@Joseph, ऐसा लगता है आप के लिए निर्भरता स्थापित नहीं किया है की तरह काम करने के लिए navbar टॉगल के लिए बूटस्ट्रैप (और बूटस्ट्रैप स्वयं)।

यदि आप टर्मिनल या कमांड लाइन खुल जाएगा और निर्देशिका है कि आपके package.json फ़ाइल पर जाएँ, चलाने के निम्न कमांड:

npm install --save jquery 
npm install --save popperjs 
npm install --save bootstrap@4.0.0-beta 

इन आदेशों आप के लिए परियोजना अपेक्षित निर्भरता स्थापित हो जाएगा। वे जो कर रहे हैं उसमें वे काफी स्पष्ट हैं, लेकिन यदि आपको क्या करना है या वे कैसे काम करते हैं, तो रीफ्रेश की आवश्यकता है, तो मैं npm installhere पर प्रलेखन को देखने का सुझाव दूंगा।

इंस्टॉल होने के बाद, आप यह सुनिश्चित करना चाहते हैं कि आप उन्हें अपने .angular-cli.json फ़ाइल में शामिल करें, ताकि आप कोणीय ऐप का उपयोग कर सकें।

Answer 2

ऐसा लगता है कि आप शायद बूटस्ट्रैप से this उदाहरण देख रहे हैं। मैंने किया, और एक ही मुद्दा था।

समस्या यह है कि यह एक कोणीय उदाहरण नहीं है, इसलिए यह काम नहीं करेगा। इसे काम करने के लिए आपको (click) ईवेंट और एक चर का उपयोग करना होगा। आप चाहते हैं अपने मेनू डिफ़ॉल्ट रूप से संक्षिप्त होने के लिए आप अपनी कक्षा में सही पर चर सेट करना होगा (आपका .ts में घटक के लिए फ़ाइल) public isCollapsed = true;

यहाँ एक plunker है यदि ऐसा है तो

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> 
    <a class="navbar-brand" href="#">Dashboard</a> 
    <button class="navbar-toggler d-lg-none" type="button" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="navbarsExampleDefault" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarsExampleDefault" [ngbCollapse]="isCollapsed"> 
    <ul class="navbar-nav mr-auto"> 
     <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="#">Settings</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Profile</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Help</a> 
     </li> 
    </ul> 
    <form class="form-inline mt-2 mt-md-0"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    </div> 
</nav> 

करने के लिए अपने टेम्पलेट को बदल

एक और बात; यदि आपका एनवी साझा मॉड्यूल में है तो आपको यहां भी NgbCollapseModule आयात करना याद रखना चाहिए।

है यही कारण है, अपने shared.module.ts होना चाहिए:

import { NgModule } from '@angular/core'; 
import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap'; 
/*Plus all your other modules*/ 

@NgModule({ 
    imports: [NgbCollapseModule], 
    declarations: [], 
    exports: [] 
}) 
export class SharedModule {} 

Answer 3

इस उदाहरण (दूसरे शब्दों में पूरे नेवबार अगर यह उत्तरदायी मोड में चल रहा है) हैमबर्गर आइकन के लिए दोनों, टॉगल सुविधा प्रदान करता है और साथ ही ड्रॉपडाउन मेनू आइटम की टॉगलिंग के रूप में।

यह एनजी-बूटस्ट्रैप का उपयोग करता है लेकिन मैं इसके बजाय "हैक्स" करने के बजाय मूल बूटस्ट्रैप नेविबर समर्थन के साथ जाऊंगा !?

जाहिर है दूसरों को भी इस मुद्दे के साथ संघर्ष: https://github.com/twbs/bootstrap/issues/24227

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <a class="navbar-brand" href="#">ApplicationName</a> 
    <button class="navbar-toggler" type="button" (click)="toggleNavbar = !toggleNavbar"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" [ngbCollapse]="!toggleNavbar"> 
    <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 ngbDropdown class="nav-item"> 
     <a class="nav-link" id="navbarDropdownMenuLink" ngbDropdownToggle aria-haspopup="true" aria-expanded="false"> 
      Dropdown link 
     </a> 
     <div ngbDropdownMenu aria-labelledby="navbarDropdownMenuLink"> 
      <a class="dropdown-item" href="#">Action</a> 
      <a class="dropdown-item" href="#">Another action</a> 
      <a class="dropdown-item" href="#">Something else here</a> 
     </div> 
     </li> 
    </ul> 
    </div> 
</nav>