Angular 调用ngx引导函数的类型脚本
我正在尝试将我的typescript与hide方法链接,在我的中,我正在运行多个函数,当用户单击弹出窗口中的x按钮时,它将全部关闭,typescript中的myfunction()将运行并触发隐藏方法pop2。hide()Angular 调用ngx引导函数的类型脚本,angular,typescript,frontend,angular5,ngx-bootstrap,Angular,Typescript,Frontend,Angular5,Ngx Bootstrap,我正在尝试将我的typescript与hide方法链接,在我的中,我正在运行多个函数,当用户单击弹出窗口中的x按钮时,它将全部关闭,typescript中的myfunction()将运行并触发隐藏方法pop2。hide() ngx引导的乐趣 &时代; 试图使typescript调用函数pop2.hide() 使typescript调用函数pop2.hide() 您可以访问类中的模板引用变量 你的HTML <body> <div> <ng-temp
ngx引导的乐趣
&时代;
试图使typescript调用函数pop2.hide()
使typescript调用函数pop2.hide()
您可以访问类中的模板引用变量
你的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>
工作你成功地完成了吗?我现在也有同样的问题。@bananaCute yes可以阅读下面的评论
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
}
}