Angular

Question

在我的第一个 Angular 项目中，我正在尝试实现一个对话框，要求在删除项目之前进行确认。我使用 ng-bootstrap 和 docs 中的示例作为起点。

我遇到的问题：我可以按预期打开和关闭模态，但模态未显示为对话框 window。它在其余内容下方作为 "normal" div 打开。

我创建了一个 "ConfirmComponent" 组件，我想在另一个组件中使用它。

confirm.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-confirm',
  templateUrl: './confirm.component.html',
  styleUrls: ['./confirm.component.scss']
})
export class ConfirmComponent implements OnInit {

  @Input() name;

  constructor(public activeModal: NgbActiveModal) { }

  ngOnInit(): void {
  }

}

confirm.component.html

<div class="modal-header">
    <h4 class="modal-title">Hi there!</h4>
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
  <p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

这是我尝试打开对话框的组件的html

游戏-list.component.html

<div class="container">
    <h1>Available Games</h1>

    <ul *ngIf="games">
        <li *ngFor="let game of games">
            <a href="#" routerLink="/games/{{ game.pk }}" class="btn btn-secondary">{{ game.pk }}</a>
            <a class="btn btn-xs btn-outline-danger text-danger" (click)="open()"><mat-icon>delete_outlined</mat-icon></a>
        </li>
    </ul>
    <div class="card">
        <div class="card-body">
            <button class="btn btn-primary" (click)="createGame()">New Game</button>
        </div>
    </div>
</div>

以及对应的组件

游戏-list.component.ts

import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { Game } from '../game';
import { GameServiceService } from '../game-service.service';
import { ConfirmComponent } from '../confirm/confirm.component';

@Component({
  selector: 'app-game-list',
  templateUrl: './game-list.component.html',
  styleUrls: ['./game-list.component.scss']
})
export class GameListComponent implements OnInit {

  games: Game[] = []

  constructor(private gameService: GameServiceService, private modalService: NgbModal) { }

  ngOnInit(): void {
    this.getGames();
  }

  getGames(): void {
    this.gameService.getGames().subscribe(games => this.games = games);
  }

  createGame(): void {
    this.gameService.createGame().subscribe(game => this.games.push(game));
  }

  open() {
    const modalRef = this.modalService.open(ConfirmComponent);
    modalRef.componentInstance.name = 'World';
  }

}

我认为我的 app.module.ts 中的导入是正确的：

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GameListComponent } from './game/game-list/game-list.component';
import { HttpClientModule } from '@angular/common/http';
import { GameDetailComponent } from './game/game-detail/game-detail.component';
import { LoginComponent } from './auth/login/login.component';
import { NavBarComponent } from './nav-bar/nav-bar.component';
import { PlayerComponent } from './game/player/player.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { MatIconModule } from '@angular/material/icon';
import { ConfirmComponent } from './game/confirm/confirm.component';


@NgModule({
  declarations: [
    AppComponent,
    GameListComponent,
    GameDetailComponent,
    LoginComponent,
    NavBarComponent,
    PlayerComponent,
    ConfirmComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    DragDropModule,
    NgbModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我怀疑（这可能是错误的）是某些重要的样式文件丢失了。在我的 Firefox 浏览器控制台中，我收到一条警告 Style document could no be loaded: http://myurl/node_modules/bootstrap/scss/_type.scss - 不知道这是否相关，因为我无法在该文档的源代码中发现任何与对话框相关的样式。

Answer 1

感谢@Eliseo 的评论，我找到了解决方案。将以下行添加到全局 style.scss 文件后，它按预期工作：

@import '~bootstrap/scss/bootstrap';

可以找到更多信息 here。

Angular - Bootstrap 模态显示但不是对话框

Angular - Bootstrap modal showing but not as dialog

typescript

angular-ui-bootstrap

bootstrap-4