我是Angular 4的新手 . 目前我在我的应用程序中使用agnular powered bootstrap . (https://ng-bootstrap.github.io/#/components/modal/examples)
现在我想在另一个页面上点击按钮打开引导模式 . 父页面如下所示:
import { Component } from '@angular/core';
import { NgbdModalBasic } from './modal-basic';
@Component({
selector: 'home',
templateUrl: './addYourCargo.component.html',
styleUrls: ['./addYourCargo.component.css'],
})
export class addYourCargo {
openModal(){
}
}
NgbdModalBasic是模态组件,它看起来如下
import {Component} from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-modal-basic',
templateUrl: './modal-basic.html',
exportAs: 'child'
})
export class NgbdModalBasic {
closeResult: string;
constructor(private modalService: NgbModal) {}
open(content) {
this.modalService.open(content).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
}
和模态HTML
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Modal title</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>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
<hr>
<pre>{{closeResult}}</pre>
我已将Modal组件包含在主module.ts文件中 .
我从父组件中单击一个按钮,它会触发openModal函数 . 我必须调用Modal组件中的open函数,以便它可以通过从父组件单击按钮来打开模态 .
我该怎么办呢 . 在openModal函数中应该做什么来打开一个模态 .
提前致谢
1 回答
您可以通过调用从其他组件访问的模态上的方法来实现(取决于组件的位置):
有关详细信息,请查看Angular doc here