web-dev-qa-db-ja.com

ng-bootstrapがangular 4で機能しない

私はangular 4で初めてです。ブートストラップを設定しようとしています。ng-bootstrapをインストールしました。

https://ng-bootstrap.github.io/#/getting-started

私はすべてページ上で好きでしたが、ページにbootstrap=が表示されません。コードは次のとおりです。

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
imports: [
   BrowserModule,
   FormsModule,  // add  this
   NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.component.html

<div class="container">

<h1 class="text-primary">{{title}} </h1>

<h2 class="text-primary">My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
   </li>
</ul>

<div class="alert alert-success" role="alert">
 <strong>Well done!</strong> You successfully read this important alert 
   message.
</div>

<div *ngIf="selectedHero">
  <h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
  <label>name: </label>
  <input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>

Index.htmlのコードも試してみましたが、機能しません。

この行では、いくつかの色が表示されると予想しています。

<h1 class="text-primary">{{title}} </h1>

Htmlのヘッダーを確認するときにbootstrap=の参照が見つかりません。ヘルプが必要ですか？ありがとう

twitter-bootstrapangularbootstrap-4ng-bootstrapangular4-forms
15
MarcosF8

あなたが言及したページで、ng-bootstrapは依存関係としてbootstrap CSSに言及しています。したがって、それは別々にロードされます。

Angular CLIを使用してアプリケーションを作成している場合は、 この公式ガイドに従って を追加して、

更新：

コメントで述べたように、.angular-cli.jsonのstyles（またはこのファイルへの他の変更）にCSSを追加するには、ng serveまたはng build --watchを再起動する必要があります。既に実行されています。

アップデート2：

Angular 6以降では、このソリューションを使用できます。

styles.cssに移動して、この行を追加します

@import "~bootstrap/dist/css/bootstrap.css";

これが内部でどのように機能するかを参照してください。

https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975

34
Meligy

あなたのコードにはng-bootstrapコンポーネントはありません！ bootstrap cssを探していると思います。これはng-bootstrapの前提条件でもあります。

index.htmlタグの間の<head></head>に次の行を追加します。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
1
Nehal