我正在尝试将我的打字稿与我的ngx-bootstrap的hide方法联系起来，在我的project中我正在运行多个函数，当用户点击popover中的x按钮时，它会一起关闭，打字稿中的myfunction（）将运行触发hide方法pop2.hide（）。
<div>
<ng-template #popoverContent3>
<div style="font-size:18px; font-family:'Times New Roman'; font-weight:bold;">
<p>Fun with ngx-bootstrap
<button type="button" (click)='pop2.hide()' class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</p>
</div>
<div>
<p>Trying to make typescript call the function pop2.hide()</p>
</div>
</ng-template>
<br><br><br><br><br><br><br>
<a [popover]="popoverContent3" #pop2="bs-popover" (click)="isOpen = !isOpen" [outsideClick]="false" placement="right">
Make typescript call the function pop2.hide()
</a>
</div>这是来自plunker的代码，x按钮。
<button type="button" (click)='pop2.hide()' class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button> myfunction(){
pop2.hide();//needs to work!
}您可以在类中访问模板引用变量。
你的HTML
<body>
<div>
<ng-template #popoverContent3>
<div style="font-size:18px; font-family:'Times New Roman'; font-weight:bold;">
<p>Fun with ngx-bootstrap
<button type="button" (click)='myfunction()' class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</p>
</div>
<div>
<p>Trying to make typescript call the function pop2.hide()</p>
</div>
</ng-template>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a [popover]="popoverContent3" #pop2="bs-popover" (click)="isOpen = !isOpen" [outsideClick]="false" placement="right">
Make typescript call the function pop2.hide()
</a>
</div>
</body>
请参阅我已将myFunction添加为关闭按钮上的单击处理程序。在组件中
import { Component, ViewChildren, QueryList, AfterViewInit,ViewChild } from '@angular/core';
import { PopoverDirective } from 'ngx-bootstrap';
@Component({
selector: 'ngx-app',
templateUrl: 'app.component.html',
styles:[`
]
`
})
export class AppComponent implements AfterViewInit{
@ViewChildren(PopoverDirective) popovers: QueryList<PopoverDirective>;
@ViewChild('pop2') pop2: ElementRef; //this is change
ngAfterViewInit() {
this.popovers.forEach((popover: PopoverDirective) => {
popover.onShown.subscribe(() => {
this.popovers
.filter(p => p !== popover)
.forEach(p => p.hide());
});
});
}
myfunction(){
this.pop2.hide();//working
}
}
工作plunkr