Angular2+ 从 ngx 芯片中选择项目时打开模态(标签输入)

Question

当我选择标签输入下拉列表中存在的标签之一时，我想打开一个模态窗口。

这是我的代码：

<div class="force-to-the-bottom">
<tag-input [ngModel]="[]" [onAdding]="onAdding">
<tag-input-dropdown
[autocompleteItems]="items"
[showDropdownIfEmpty]="true"
[dynamicUpdate]="false"
>
</tag-input-dropdown>
</tag-input>
</div>

<ng-template #content1 let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">My Modal</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">            
<div class="input-group">
<input  name="modal-conf" type="text" class="form-control">                
</div>            
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger">Done</button>
</div>
</ng-template>

我的输入标签具有函数调用[onAdding] = "onAdding"，该函数调用模式窗口的打开：

import { Component, OnInit, TemplateRef, ViewChild, } from '@angular/core';
import { Observable, of } from 'rxjs';
import { NgbModal, ModalDismissReasons, } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
@ViewChild('content1', {static: false}) content1 !: TemplateRef<any>;
name = 'Angular';
closeResult: string;
public items = [
{display: 'Pizza', value: 1},
{display: 'Pasta', value: 2},
{display: 'Parmesan', value: 3},
];
public onAdding(tag: any): Observable<any> {    
console.log(tag);
const confirm = window.confirm('Do you really want to add this tag?');                
this.modalService.open(this.content1, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {     
this.closeResult = `Closed with: ${result}`;      
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;      
});
return of(tag);        
}
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}`;
}
}
constructor(private modalService: NgbModal) { }
}

我不明白为什么，模态窗口没有打开。 这是我的堆栈闪电战：https://stackblitz.com/edit/angular-ye2n9g

有人可以帮助我吗？

Answer 1

您需要在标签输入选择器中添加(onSelect(方法，然后您可以在其定义中打开模态弹出窗口。