ng-bootstrap无法在angular 4中工作 [英] ng-bootstrap not working in angular 4
问题描述
我是angular 4的新手,我正在尝试配置引导程序. 我安装了ng-bootstrap:
https://ng-bootstrap.github.io/#/getting-started
我在页面上都喜欢,但在页面上看不到引导. 这是我的代码:
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的标头时,找不到引导程序的任何引用. 有什么帮助吗? 谢谢
在您提到的页面中,ng-bootstrap提到了bootstrap CSS作为依赖项.因此,是单独加载的.
如果您使用Angular CLI创建应用程序,则可以按照此官方指南添加
更新:
如注释中所述,将CSS添加到.angular-cli.json
中的styles
(或对此文件进行任何其他更改)将要求您重新启动ng serve
或ng build --watch
(如果已经运行). /p>
更新2(当前推荐的方法):
对于Angular 6及更高版本,您可以使用此解决方案.
转到styles.css
并添加此行
@import "~bootstrap/dist/css/bootstrap.css";
另请参阅它的工作原理:
https://ng-bootstrap.github.io/#/getting-started
I did all like on the page, but I don't see the bootstrap on my page. Here is my code:
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>
I tried also some code in the index.html, but it does not work,
for this line I am expecting to see some color:
<h1 class="text-primary">{{title}} </h1>
I don't find any reference of bootstrap when I check the header of the html. Any help, please? Thanks
In the page you mentioned, ng-bootstrap mentions bootstrap CSS as a dependency. So that's loaded separately.
If you are using Angular CLI to create your application, you can follow this official guide to add it,
Update:
As mentioned in the comment, adding the CSS to styles
in .angular-cli.json
(or any other changes to this file) will require you to restart your ng serve
or ng build --watch
if you have either already running.
Update 2 (Current Recommended Approach):
For Angular 6 and higher you can use this solution.
Go to styles.css
and add this line
@import "~bootstrap/dist/css/bootstrap.css";
See also how this works under the hood:
这篇关于ng-bootstrap无法在angular 4中工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!