ng-bootstrap 从 angular 中的服务调用下拉菜单的方法

Question

我想从组件外部的服务访问 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
         }
    }

Answer 1

您可以将下拉列表传递给服务的方法

this.myService.doStuff(this.dropDown)

或者，在您的服务中声明一个变量"dropDown"，并且在组件的 AfterViewInit 中等于服务的变量

ngAfterViewInit()
{
    this.myService.dropDown=this.dropDown
}

ng-bootstrap 从 angular 中的服务调用下拉菜单的方法

ng-bootstrap dropdown's method calling from service in angular

angular

drop-down-menu

angular-services

ng-bootstrap