Angular 7
/ ngx-bootstrap 4.0.1
Dependencies
:
"bootstrap": "3.3.7",
"bootstrap-colorpicker": "2.5.1",
"bootstrap-duallistbox": "3.0.6",
"bootstrap-markdown": "2.10.0",
"bootstrap-progressbar": "0.9.0",
"bootstrap-slider": "9.8.0",
"bootstrap-tagsinput": "0.7.1",
"bootstrap-timepicker": "0.5.2",
在Angular 7中,我有一个组件。它只是一个按钮,当您单击它时,它显示一个模式。
如果我从div之类的元素中调用它,它将起作用。
但是当我从下拉菜单中调用它时,模态将不会出现。
这是我的代码:
正常通话:模式可见:
<shared-article-copy (ArticleEM)="addArticle($event, 'articleCopie')" [agentId]="this.samplesBill.recipient.agent_Id"
*ngIf="this.samplesBill && this.samplesBill.recipient"></shared-article-copy>
从下拉菜单中调用:模式不可见:
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Test 1</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Test2 <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li> <shared-article-copy (ArticleEM)="addArticle($event, 'articleCopie')" [agentId]="this.samplesBill.recipient.agent_Id"
*ngIf="this.samplesBill && this.samplesBill.recipient"></shared-article-copy></li>
</ul>
</div>
</div>
我认为,组件的视图绑定到li
元素而不是主体。
这是组件视图shared-article-copy
的代码的一部分:
<button type="button" class="btn btn-labeled btn-primary" (click)="loadModalArticleImport()" ng-dblclick="return false;">
<span class="btn-label">
<i class="fa fa-plus"></i>
</span>{{ textTitle }}
</button>
<div bsModal #calculatorModal="bs-modal" class="modal fade" tabindex="0" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true" style="background-color: white" [hidden]="!articleCalculator" (onHidden)="closeCalculatorModal()"
>
<div class="modal-dialog modal-lg" style="background-color: white">
<div class="modal-content">
<div class="modal-header" *ngIf="articleCalculator">
Modal Header
</div>
<div class="modal-body">
modal body !
</div>
</div>
</div>
</div>
我无法复制该组件的所有代码,因为它们不相关。
这是的一部分:
export class SharedArticleCopyComponent implements OnInit {
@Input() buttonClass: string;
@Input() agent: Agent; // pour avoir un client par défaut
@Input() agentId: string; // Quand on a pas lagent mais que son ID people
@Input() textTitle: string = 'Copier un article existant';
@Input() calculatorTitle: string = 'Détails de l\'article: ';
@Input() AgentReadonly: boolean = false;
@Output() public ArticleEM: EventEmitter<Article> = new EventEmitter<Article>();
@ViewChild('copyArticleModal') public lgModal: ModalDirective;
@ViewChild('calculatorModal') public lgCalculatorModal;
constructor(private httpClient: HttpClient, private articlesService: ArticlesService, public agentsClientsService: AgentsClientsService, public peopleService: PeopleService,
private sessionService: SessionService, private _route: ActivatedRoute,
private notificationLGIService: NotificationLGIService, private datePipe: DatePipe, private domService: DomService) {
}
即使从下拉菜单中调用组件,如何使模态可见?
答案 0 :(得分:0)
您看不到该模式,因为它是隐藏的下拉菜单的子菜单。
将组件放入下拉列表中时,您将得到以下DOM结构。
drop-down menu(position:absolute) > shared-article-copy > modal(position:fixed)
单击按钮以打开模态时,模态会打开,但下拉菜单也会关闭,并且显示设置为none
。
drop-down menu(display:none) > shared-article-copy > modal(position:fixed)
因此您看不到下拉列表及其任何子项(包括模态)。
解决方案:
包含模态的引导程序下拉列表的CSS:
.dropdown-menu.contains-modal {
position: unset;
display: inline-block;
height: 0;
width: 0;
min-width: unset;
overflow: hidden;
border: 0;
padding: 0;
}
.open>.dropdown-menu.contains-modal {
position: absolute;
height: unset;
width: unset;
min-width: 160px;
padding: 5px 0;
border: 1px solid rgba(0,0,0,.15);
overflow: unset;
}
并使用
<ul class="dropdown-menu contains-modal">...
代替
<ul class="dropdown-menu">...