javascript - 使用模态 [Bootstrap] 在 Angular 中登录表单

Question

我是 Angular 的新手，我正在为 Ui 使用引导程序。现在我被困在一个点上。我必须以角度创建一个登录表单，并且我希望它是一个模态的。我正在为登录模式使用单独的组件。我有一个带有按钮的标题组件，以及带有模态正文的登录组件。所以我的主要问题是如何通过在标题组件中单击按钮来打开登录组件（作为模式）。

标题组件：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 {
  }

}

标签： javascriptangular

Answer 1

我猜你正在使用引导模式。如果是这样

在您的标题组件中 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