为什么 @ViewChild(NgbDropdown) 在我的组件中不起作用？

Question

我想扩展 ng-Boostrap 的下拉功能，通过按下浏览器的后退按钮（在移动设备上）关闭菜单。 但是 this.dropdown 在隐藏函数中是未定义的。 为什么？

import {Component, Input, ViewChild} from '@angular/core';
import {NgbDropdown} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-mobile-dropdown',
  templat: '<div ngbDropdown class="menu" [placement]="placement" (openChange)="openChange($event)">
  <span class="menu-btn" ngbDropdownToggle><i [class]="btnIcon"></i><span *ngIf="btnLabel">{{btnLabel}}</span></span>
  <div ngbDropdownMenu>
    <a ngbDropdownItem *ngFor="let item of actions" class="dropdown-item" (click)="item.action()">{{item.label}}</a>
  </div>
</div>
'
})
export class MobileDropdownComponent{

  @ViewChild(NgbDropdown,{static:false}) dropdown: NgbDropdown;
  @Input() placement: string;
  @Input() btnIcon: string;
  @Input() btnLabel: string;
  @Input() actions: Array<any>;

  hide(){
    console.log('closing', this.dropdown);
    window.removeEventListener('popstate', this.hide);
    this.dropdown.close();
  }

  openChange(opened: boolean) {
    if (opened) {
      window.history.pushState('ddOpen',null,null);
      window.addEventListener('popstate',this.hide);
    } else {
      if(history.state === 'ddOpen'){
        window.history.back();
        window.removeEventListener('popstate', this.hide);
      }
    }
  }
}

解决方案：

在 hide() 函数中，作用域不是组件的作用域。

  openChange(opened: boolean) {
    const self=this;
    function hide(){
      console.log('closing', self.dropdown, self.actions);
      window.removeEventListener('popstate', hide);
      self.dropdown.close();
    }
    if (opened) {
      window.history.pushState('ddOpen',null,null);
      window.addEventListener('popstate',hide);
    } else {
      if(history.state === 'ddOpen'){
        window.history.back();
        window.removeEventListener('popstate', hide);
      }
    }
  }

Answer 1

尝试

@ViewChild('dropdownRef', {static:false, read: NgbDropdown}) dropdown: NgbDropdown;

Answer 2

在声明模板引用变量的文本前添加#

像这样尝试：

.html

<div #dropdownRef ngbDropdown class="menu" [placement]="placement" (openChange)="openChange($event)">

.ts

 @ViewChild('dropdownRef',{static:false}) dropdown: NgbDropdown;