ng-bootstrap 不工作 angular 4
ng-bootstrap not working in angular 4
我是 angular 4 的新手,我正在尝试配置 bootstrap。
我安装了 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 的 header 时,我没有找到 bootstrap 的任何引用。
有什么帮助吗?
谢谢
我在您的代码中没有看到任何 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>
在您提到的页面中,ng-bootstrap 提到 bootstrap CSS 作为依赖项。所以这是单独加载的。
如果您使用 Angular CLI 创建您的应用程序,您可以 follow this official guide 添加它,
更新:
如评论中所述,将 CSS 添加到 .angular-cli.json
中的 styles
(或对此文件的任何其他更改)将需要您重新启动 ng serve
或 ng build --watch
如果您已经 运行.
更新 2(当前推荐的方法):
对于 Angular 6 及更高版本,您可以使用此解决方案。
转到 styles.css
并添加此行
@import "~bootstrap/dist/css/bootstrap.css";
另请参阅其背后的工作原理:
我是 angular 4 的新手,我正在尝试配置 bootstrap。 我安装了 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 的 header 时,我没有找到 bootstrap 的任何引用。 有什么帮助吗? 谢谢
我在您的代码中没有看到任何 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>
在您提到的页面中,ng-bootstrap 提到 bootstrap CSS 作为依赖项。所以这是单独加载的。
如果您使用 Angular CLI 创建您的应用程序,您可以 follow this official guide 添加它,
更新:
如评论中所述,将 CSS 添加到 .angular-cli.json
中的 styles
(或对此文件的任何其他更改)将需要您重新启动 ng serve
或 ng build --watch
如果您已经 运行.
更新 2(当前推荐的方法):
对于 Angular 6 及更高版本,您可以使用此解决方案。
转到 styles.css
并添加此行
@import "~bootstrap/dist/css/bootstrap.css";
另请参阅其背后的工作原理: