Angular - Bootstrap модальное отображение, но не как диалог - PullRequest
Новая
       5

Angular - Bootstrap модальное отображение, но не как диалог

0 голосов
/ 08 апреля 2020

Работая над моим первым Angular проектом, я пытаюсь создать диалоговое окно с запросом подтверждения перед удалением элемента. Я использую ng- bootstrap и примеры в документах в качестве отправной точки.

Проблема, с которой я сталкиваюсь: я могу открывать и закрывать модальный режим, как и ожидалось, но модальный не отображается как диалоговое окно. Он открывается как «обычный» div ниже остального содержимого.

Я создал компонент «ConfirmComponent», который я пытаюсь использовать в другом компоненте.

Подтвердите. 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 {
  }

}

verify.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 компонента, в котором я пытаюсь откройте диалоговое окно

game-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>

и соответствующий компонент

game-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 - не знаю, насколько это актуально, так как я не смог обнаружить какие-либо стили, относящиеся к диалогу, в источнике этого документа.

1 Ответ

0 голосов
/ 08 апреля 2020

Благодаря комментарию @Eliseo я нашел решение. После добавления следующей строки в глобальный файл style.scss он заработал, как и ожидалось: 

@import '~bootstrap/scss/bootstrap';

Дополнительную информацию можно найти здесь .

...