ng-bootstrap 从 angular 中的服务调用下拉菜单的方法
ng-bootstrap dropdown's method calling from service in angular
我想从组件外部的服务访问 NgbDropdown 方法。
这是模板片段:
<div ngbDropdown #dropDown="ngbDropdown" display="static">
<a ngbDropdownToggle (click)="$event.preventDefault()" href="#" role="button" id="dropdownMenuButton">
Actions
</a>
<div ngbDropdownMenu aria-labelledby="dropdownManual">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>
在我的组件中,我可以使用模板引用轻松访问 NgbDropdown 的方法。
例如:
@ViewChild('dropDown', {static: true}) dropDown: NgbDropdown;
...
...
someMethod() {
this.dropDown.toggle(); // toggle method from NgbDropdowm.
}
但就我而言,我必须使用来自服务(而不是组件)的切换操作。我怎样才能做到这一点?
我的服务:
export class Service{
constructor() {}
// some operation happened after clicking button from dropdown menu
doStuff() {
doSomeOtherStuff();
...
// after completing work I want to close/toggle the dropdown. Not before
// here will be the code of closing dropdown
}
}
您可以将下拉列表传递给服务的方法
this.myService.doStuff(this.dropDown)
或者,在您的服务中声明一个变量"dropDown",并且在组件的 AfterViewInit 中等于服务的变量
ngAfterViewInit()
{
this.myService.dropDown=this.dropDown
}
我想从组件外部的服务访问 NgbDropdown 方法。 这是模板片段:
<div ngbDropdown #dropDown="ngbDropdown" display="static">
<a ngbDropdownToggle (click)="$event.preventDefault()" href="#" role="button" id="dropdownMenuButton">
Actions
</a>
<div ngbDropdownMenu aria-labelledby="dropdownManual">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>
在我的组件中,我可以使用模板引用轻松访问 NgbDropdown 的方法。 例如:
@ViewChild('dropDown', {static: true}) dropDown: NgbDropdown;
...
...
someMethod() {
this.dropDown.toggle(); // toggle method from NgbDropdowm.
}
但就我而言,我必须使用来自服务(而不是组件)的切换操作。我怎样才能做到这一点?
我的服务:
export class Service{
constructor() {}
// some operation happened after clicking button from dropdown menu
doStuff() {
doSomeOtherStuff();
...
// after completing work I want to close/toggle the dropdown. Not before
// here will be the code of closing dropdown
}
}
您可以将下拉列表传递给服务的方法
this.myService.doStuff(this.dropDown)
或者,在您的服务中声明一个变量"dropDown",并且在组件的 AfterViewInit 中等于服务的变量
ngAfterViewInit()
{
this.myService.dropDown=this.dropDown
}