Angular 5 ng-bootstrap modal не отображается правильно при вызове в методе подписки на тему - PullRequest
Новая
       7

Angular 5 ng-bootstrap modal не отображается правильно при вызове в методе подписки на тему

0 голосов
/ 12 июня 2018

Я хотел отобразить простой модал при вызове метода подписки на тему.

Мой класс appComponent настроен очень просто: 

import { Component, OnInit, ViewChild } from '@angular/core';
import { AppService } from './app.service';
import { HttpClient } from '@angular/common/http';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

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

  @ViewChild('content') content;

  constructor(private as: AppService, private http: HttpClient, private modalService: NgbModal){
    as.getError().subscribe(e => {
      console.log('err '+e);
      this.open(this.content);
    });
  }

open(content){
  this.modalService.open(content);
}

  ngOnInit(){
    this.http.get("http://localhost:8080/get/").subscribe(r => {
    console.log(r);
    });
  }
}

И это HTML: 

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Profile update</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form>
      <div class="form-group">
        <label for="dateOfBirth">Date of birth</label>
      </div>
    </form>
  </div>
</ng-template>

Я использую errorHandler для отлова различных ошибок.Если выдается ошибка, она отлавливается и отправляется субъекту в сервис.В конструкторе я подписываюсь на тему и хотел бы показать модал с ошибкой.Проблема в том, что он не отображает это правильно.Он добавляется в конец моей страницы и не отображается как обычный диалог.

Хотелось бы иметь this

Но получил this

...