Angular 7
/ ngx-bootstrap 4.0.1
依赖项
:
"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) {
}
如何使模态框在从下拉菜单中调用组件时仍可见?
编辑以添加loadModalArticleImport的内容:
//lgModal: @ViewChild('copyArticleModal') public lgModal: ModalDirective;
loadModalArticleImport() {
this.lgModal.show();
}
*ngIf="this.samplesBill && this.samplesBill.recipient"
可以缩短为*ngIf="this.samplesBill?.recipient"
。 - Reactgular