如何自定义ng-bootstrap警报

Question

这是我第一次使用ng-bootstrap， 而且我想知道如何自定义警报，我看到了示例，但对我而言不起作用

这是我的代码

app.component.html

<ngb-alert type="custom" [dismissible]="false"><strong>Whoa!</strong> This is a custom alert.</ngb-alert>

alert-custom.ts

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

@Component({
  selector: 'ngbd-alert-custom',
  templateUrl: './app.component.html',
  styles: [`
    :host >>> .alert-custom {
      color: #99004d;
      background-color: #f169b4;
      border-color: #800040;
    }
  `]
})
export class NgbdAlertCustom {}

alert-custom.module.ts

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

import { NgbdAlertCustom } from './alert-custom';

@NgModule({
  imports: [BrowserModule, NgbModule],
  declarations: [NgbdAlertCustom],
  exports: [NgbdAlertCustom],
  bootstrap: [NgbdAlertCustom]
})
export class NgbdAlertCustomModule {}

main.ts

import './polyfills';

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { NgbdAlertCustomModule } from "./app/NgbdAlertCustomModule";

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
platformBrowserDynamic().bootstrapModule(NgbdAlertCustomModule)
  .catch(err => console.error(err));

使用此代码时，您只会看到警报文本，没有任何修饰

Answer 1

无法复制您遇到的附带代码的问题...

随附的stackblitz与您提供的代码配合使用

相关的 app.component.html ：

<ngb-alert type="custom" [dismissible]="false"><strong>Whoa!</strong> This is a custom alert.</ngb-alert>

相关的 alert-custom.ts ：

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

@Component({
  selector: 'ngbd-alert-custom',
  templateUrl: './app.component.html',
  styles: [`
    :host >>> .alert-custom {
      color: #99004d;
      background-color: #f169b4;
      border-color: #800040;
    }
  `]
})
export class NgbdAlertCustom {}