我正在尝试从使用路由器链接的导航栏打开ng-bootstrap弹出模式对话框。我浏览了ng-bootstrap.github.io上的教程。我创建了一个新组件并添加了示例代码。但是,我需要从我的header.component.html中的navbar routerlink调用模式弹出窗口,而不是网页上的按钮。任何帮助将不胜感激。
component.html代码:
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Hi there!</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, World!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
component.ts代码:
import { Component } from '@angular/core';
import { NgbModalConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
providers: [NgbModalConfig, NgbModal]
})
export class LoginComponent {
constructor(config: NgbModalConfig, private modalService: NgbModal) {
// customize default values of modals used by this component tree
config.backdrop = 'static';
config.keyboard = false;
}
open(content) {
this.modalService.open(content);
}
}
在header.component.html中,我有一个循环来循环访问每个routerlink,但是我知道我需要摆脱循环并明确地编写每个routerlink。
<li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
<a class="nav-link" [routerLink]="[menuItem.path]">
<a> {{menuItem.title}}</a>
</a>
</li>
<!-- <a href="#" data-toggle="modal" data-target="#login" class="btn btn-primary btn-md navbar-btn ml-0 ml-md-4">Login </a> -->
</ul>