NG Bootstrap NG 警报不起作用

Question

我正在关注入门指南 https://ng-bootstrap.github.io/#/getting-started。尝试基本警报工作。它显示警告消息而不是 bootstrap 样式 sheet.

的样式

知道我在这里遗漏了什么吗？

app.module.ts

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


import { AppComponent } from './app.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';


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

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <p>
    <ngb-alert [dismissible]="false">
      <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </ngb-alert>
  </p>

Answer 1

ng-bootstrap 只是添加了功能的功能，它没有添加实际的样式。您需要做的是添加 Bootstrap CSS 作为依赖项。

我用一个例子创建了这个 StackBlitz。在外部资源中，我添加了缩小的 CSS URL，现在应用程序内部显示了正确的样式。

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css

NG Bootstrap NG 警报不起作用

NG Bootstrap NG alert is not working

ng-bootstrap