对外部npm模块组件的ViewChild或本地引用

Question

我在我的项目中使用SimpleBar (https://www.npmjs.com/package/simplebar-angular)。

因为我想修改组件的一些样式，所以我在模板中添加了一个本地引用，

<ngx-simplebar [options]="simpleBarOptions" #simplebar></ngx-simplebar>

在我的Typescript文件中像这样查看孩子：

@ViewChild('simplebar') simplebar: ElementRef;

但是，当我尝试使用以下代码将其登录到控制台时。它返回未定义的。为什么会这样呢？如果我直接在本地引用<div>，那么它工作得很好。

  ngAfterViewInit() {
    console.log('log: ' + this.simplebar.nativeElement);
  }

我在Chrome (F12模式)中看到的组件代码如下：

<ngx-simplebar _ngcontent-opy-c3="" data-simplebar="init" ng-reflect-options="[object Object]">
  <div class="simplebar-wrapper" style="margin: 0px;">
  ......
  </div>
</ngx-simplebar>

非常感谢！

安格斯

Answer 1

试试这个：

@ViewChild(SimplebarAngularComponent, { static: false }) simplebar: ElementRef<SimplebarAngularComponent>;