使用Modal[Bootstrap]在Angular中登录表单

Question

我是Angular的新手，我正在为Ui使用bootstrap。现在我陷入了困境。我必须创建一个有角度的登录表单，我希望它是一个模态。我正在为登录模式使用一个单独的组件。我有一个带有按钮的头组件，还有一个带有模态主体的登录组件。因此，我的主要问题是如何通过单击头部组件中的按钮来打开logincomponent(作为模态(。

收割台组件：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

我猜您使用的是引导模式。如果是，

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