Форма входа в Angular Использование модального [Bootstrap]

Question

Я новичок ie до Angular, и я использую bootstrap для пользовательского интерфейса. Теперь я застрял в точке. Я должен создать форму входа в angular, и я хочу, чтобы она была модальной. Я использую отдельный компонент для модального входа. У меня есть компонент заголовка, который имеет кнопку, и компонент входа в систему с модальным телом. Поэтому мой главный вопрос - как открыть компонент login (как модальный) нажатием кнопки в компоненте заголовка.

Компонент заголовка: Html:

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">{{ title }}</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/home">Home</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/about">About</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/menu">Menu</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/contact">Contact</a>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item mr-2">
        <a class="nav-link" (click)="openLoginForm()" data-toggle="modal"
          data-target="#staticBackdrop">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" (click)="openSignUpForm()">Sign Up</a>
      </li>
    </ul>
  </div>
</nav>

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4" style="font-weight: 400;">{{ title }}</h1>
    <p class="lead">We take inspiration from the World's best cuisines and create a unique fusion experience. Our
      lipsmacking creation will tickle your culinary senses!</p>
  </div>
</div>

.ts файл:

import { Component, OnInit } from '@angular/core';
import { LoginComponent } from '../login/login.component';

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

  title = 'Restaurant';

  constructor() { }

  ngOnInit(): void {
  }

  openLoginForm(): void {}

  openSignUpForm(): void {}

}

Компонент входа: Html файл:

<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Understood</button>
            </div>
        </div>
    </div>
</div>

.ts файл:

import { Component, OnInit } from '@angular/core';


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

  constructor() {}

  ngOnInit(): void {
  }

}

Answer 1

Я думаю, вы используете bootstrap модальный. если это так

В вашем компоненте заголовка ts-

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

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

      title = 'Restaurant';

      constructor(private modalService: NgbModal) { }

      ngOnInit(): void {
      }

       openLoginForm(): Void{
         const modalRef = this.modalService.open(LoginComponent); 
        }

      openSignUpForm(): void {}

    }

Пример- https://stackblitz.com/edit/angular-bootstrap-modal?file=app%2Fapp.component.ts