Угловое 6 модальное открытие на той же странице не во всплывающем окне - PullRequest
Новая
       43

Угловое 6 модальное открытие на той же странице не во всплывающем окне

0 голосов
/ 24 сентября 2019

enter image description here У меня угловой проект, включающий панель инструментов в верхней части страницы с кнопкой «Войти».Когда я нажимаю на эту кнопку, я хочу, чтобы появилось модальное диалоговое окно.

Однако я запустил две проблемы, показанные на скриншоте ниже.Во-первых, когда я загружаю страницу, загружаются оба модала (выделены красным).Они должны появляться только в том случае, если нажата соответствующая кнопка.

Проект Stackblitz находится по ссылке ниже: https://stackblitz.com/github/eugene01a/online-exam/tree/master/frontend

Второй вопрос: почему они не появляются в их собственных всплывающих окнах?

import {
  Component,
  OnInit
} from '@angular/core';
import {
  ModalService
} from "./_services";

import './_content/app.less';
import './_content/modal.less';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'

})
export class AppComponent implements OnInit {
  authenticated = false;

  constructor(private modalService: ModalService) {}

  ngOnInit() {}

  openModal(id: string) {
    this.modalService.open(id);
  }

  closeModal(id: string) {
    this.modalService.close(id);
  }

}
<!-- main app container -->
<mat-toolbar color="primary" class="mat-elevation-z10">
  <button mat-button>Online Exams</button>
  <button mat-button>About</button>

  <!-- This fills the remaining space of the current row -->
  <span class="fill-remaining-space"></span>
  <button mat-button (click)="openModal('signin-modal')" *ngIf="!authenticated">Sign In</button>
  <button mat-button (click)="openModal('signout-modal')" *ngIf="authenticated">Sign Out</button>
</mat-toolbar>

<div class="view-container">
  <router-outlet></router-outlet>
</div>

<jw-modal id="signin-modal">
  <h1>Sign in button clicked</h1>
  <button (click)="closeModal('signin-modal');">Close</button>
</jw-modal>

<jw-modal id="signout-modal">
  <h1>Sign Out button clicked</h1>
  <button (click)="closeModal('signout-modal');">Close</button>
</jw-modal>
...