Question

我有一个小组件：

@Component({
  selector: "tomato-timer",
  templateUrl: './tomato-timer.html'
})
export class TomatoTimerComponent {
  onCountdownCompleted(): void{
    alert('Time UP!');
  }
}

使用模板：

<div class="container text-center">
    <img src="../assets/img/tomato.png" alt="Tomato">
    <countdown
        [seconds] = "25"
        (complete) = "onCountdownCompleted()"
        #counter>
    </countdown>
    <p>

        <button  type="button" class="btn btn-danger"

                 (click)="counter.seconds = 25">
            Reset countdown to 25 seconds
        </button>
    </p>
    <p *ngIf="counter.seconds < 10">
        Beware! Only
        <strong>{{ counter.seconds }} seconds</strong>
        left.
    </p>
</div>

我正在使用ng-bootstrap，但我不明白如何使这个愚蠢的按钮看起来像btn-danger虽然我已经在模板中指定了所有内容。但是说，Angular很糟糕

这是模块：

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

Answer 1

需要将这样的导入添加到styles.css：

@import url('../node_modules/bootstrap/dist/css/bootstrap.css');

Angular 2 bootstrap与模板一起使用

1 个答案: