ng-bootstrap不能正常工作（angular2）

问题描述：

我想在我的Angular2项目中使用引导程序，使用ng-bootstrap。ng-bootstrap不能正常工作（angular2）

按照他们的指示，我添加了引导css文件，在我的systemJS配置，安装了NG-引导映射@ NG-引导和增加他们的主要模块，以我的根模块：

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

import { NgbModule }   from '@ng-bootstrap/ng-bootstrap'; 
import { AppComponent }   from './app.component'; 
import { HeaderComponent }  from './header/header.component'; 
import { AppRoutingModule }  from './app-routing.module'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    AppRoutingModule, 
    NgbModule.forRoot() 
    ], 
    declarations: [ 
    AppComponent, 
    HeaderComponent 
    ], 
    providers: [ HeroService ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { }

但是当我尝试要创建一个简单的消息传递板模板，它不会按预期工作。当我离开Ngbmodule时，似乎没有任何变化。很奇怪的是，当我从bootstrap 4 css更改为bootstrap 3.3.6 css时，更多按预期工作，但文本区域之类的简单内容仍然没有样式化。

我在安装ng-bootstrap期间做错了什么？任何帮助将受到欢迎。

UPDATE

这是我使用的标记和我的输出的一个示例：http://plnkr.co/edit/A9DySwR3PBNJShRFi27Q?p=preview

虽然这是我用来实现对角-1项目具有相同的码的结果： http://prnt.sc/db9azv

。“但是，当我试图创建一个简单的通讯板的模板，它不按预期当我离开Ngbmodule出来，似乎没有任何改变” - 这并不是非常清楚你在这里所说的“不按预期工作”是什么意思。你可以再详细一点吗？在任何情况下，这里都是一个显示正在运行的ng-bootstrap组件的最简单的plunker：http://plnkr.co/edit/cKVVBdHJxnC0X67UjilM?p=preview-尝试用这个笨蛋重现你的问题作为一个起点。 –

'ng-bootstrap'只能在'bootstrap-4'版本下运行..你可以检出这个[github问题]（https://github.com/ng-bootstrap/ng-bootstrap/issues/998） –

啊，感谢你的例子！这使我对它更清晰。我也开始认为我期待的这种行为可能不正确。这是我正在使用的标记：http://plnkr.co/edit/3vpHSIGWH6i8M0QOJdPv?p=preview，这是我所期待的：http://prntscr.com/db9azv –

答

您的问题似乎并不是专门针对https://ng-bootstrap.github.io项目，而是仅针对Bootstrap的4个CSS。根据您的示例，我认为您的CSS类名称中只有一个拼写错误 - 应该是form-control和而不是form control。

这里是一个工作plunker：http://plnkr.co/edit/hfvCwMistZdIWUlOAthM?p=preview

是的，我刚刚发现他们在Bootstrap 4中放下了“面板”。这个错字也是问题的一部分，这让我觉得它并不是一起工作。无论如何感谢您的帮助，我想我会开始学习卡片！ –

ng-bootstrap不能正常工作（angular2）

相关推荐