angular4を使用してbootstrap4でモバイル画面のサイズを変更するときにnavbarを切り替えられない理由4.スクリプトとスタイルのangularcliに含めました。ブートストラップからのノードモジュール。コードに何か欠けているものはありますか?以下をご確認ください。何か問題はありますか?助けてください
<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"
}
}
@ Joseph、navbarトグルが機能するためのbootstrap=(およびbootstrap自体))の依存関係をインストールしていないようです。
ターミナルまたはコマンドラインを開き、package.json
ファイルを含むディレクトリに移動する場合、次のコマンドを実行します。
npm install --save jquery
npm install --save popper.js
npm install --save [email protected]
これらのコマンドは、プロジェクトに必要な依存関係をインストールします。彼らは何をしているのかかなりはっきりしていますが、彼らが何をしているのか、どのように機能するのかをリフレッシュする必要がある場合は、npm install
のドキュメント を参照することをお勧めしますここに 。
それらをインストールしたら、.angular-cli.jsonファイルにそれらを含めるようにしてください。そうすれば、angularアプリで使用できます。
Bootstrapの this の例を見ていたようです。私も同じ問題を抱えていました。
問題は、これがangularの例ではないため動作しないことです。動作させるには、(click)
イベントと変数を使用する必要があります。
<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>
デフォルトでメニューを折りたたむ場合は、クラスで(コンポーネントの.tsファイルで)変数をtrueに設定する必要がありますpublic isCollapsed = true;
これは plunker です
もう一つ;ナビゲーションが共有モジュールにある場合は、ここでも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 {}
この例では、ハンバーガーアイコン(レスポンシブモードで実行されている場合はナビゲーションバー全体)の機能の切り替えと、ドロップダウンメニュー項目の切り替えの両方を提供します。
Ng-bootstrapを使用しますが、この「ハック」を行う代わりに、ネイティブBootstrap navbarのサポートを使用したいです!?
明らかに他の人も同じ問題に苦しんでいます: 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>
前述のように、プロパティが必要です(たとえば、最初はfalseであるisShown)。次に、
[ngClass]="{ 'show': isShown }"
ここに
<div class="collapse navbar-collapse" [ngClass]="{ 'show': isShown }" id="navbarSupportedContent" >
リンク上のクリックイベントにより、リンクをたどるとメニューが再び折りたたまれることを確認します。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
isShown:boolean = false;
constructor() { }
ngOnInit() {
}
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" routerLink="/"><img width="20%" src="/assets/logo.svg"></a>
<button #navbarToggler class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" (click)="isShown = !isShown" [attr.aria-expanded]="isShown" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" [ngClass]="{ 'show': isShown }" id="navbarSupportedContent" >
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" (click)="isShown = false" routerLink="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" (click)="isShown = false" routerLink="/contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" (click)="isShown = false" routerLink="/imprint">Imprint</a>
</li>
</ul>
</div>
</nav>
Angular Bootstrap 4で動作し、@ ng-bootstrapを使用しない場合は、このgitリポジトリのコードを参照してください: https: //github.com/fmorriso/Angular-bootstrap4-nav/tree/master/src/app/navigation
これに時間をかけすぎた。ハックする必要がありますAngularそれを動作させるために;それは単に間違ったバージョンなどの問題ではありません。