无法导入 ng2-select SelectComponent

Question

我正在尝试修复valor-software 库ng2-select 中的问题，在将其安装到我的node_modules (npm install --save ng2-select) 后，我想使用@ViewChild 将SelectComponent 作为子级注入，但我总是不确定. 它看起来真的很微不足道，我在项目的 github 中看到了 cmets，它似乎对很多人有用。 我在angular/CLI project，如果我需要添加更多信息，请在 cmets 中提及。谢谢 。

node_modules
    |
    + --ng2-select
        |
        +--ng2-select.d.ts
        |
        +--select/
            |
            +--select.d.ts
            |
            +-- ...

gn2-select.d.ts 内容

export * from './select/common';
export * from './select/off-click';
export * from './select/select.module';
export * from './select/select';
export * from './select/select-interfaces';
export * from './select/select-item';
export * from './select/select-pipes';

select/select.d.ts 的内容

export declare class SelectComponent implements OnInit, ControlValueAccessor        {
     private sanitizer;
     .....
}

我的组件：

import { Component, OnInit, ViewChild } from '@angular/core';
import { SelectComponent }  from 'ng2-select';

export class SubSystemComponent implements OnInit {
 @ViewChild('SelectComponent') 
private sysSearchInput: SelectComponent;

  constructor(private sysService : SubSysService) { }

  ngOnInit() {
    console.log(this.sysSearchInput);

  }

Answer 1

您应该在ngAfterViewInit 方法中访问您的@ViewChild，在调用ngOnInit 时尚未设置，请参阅docs：

在调用 ngAfterViewInit 回调之前设置视图查询。

import {AfterViewInit, Component, Directive, ViewChild} from '@angular/core';
@Directive({selector: 'child-directive'})
class ChildDirective {
}
@Component({selector: 'someCmp', templateUrl: 'someCmp.html'})
class SomeCmp implements AfterViewInit {
  @ViewChild(ChildDirective) child: ChildDirective;
  ngAfterViewInit() {
    // child is set
  }
}

你也可以看看Lifecycle Hooks

您还应该使用类引用而不是字符串，因为字符串用于定位 ElementRef，而不是组件：

@ViewChild('SelectComponent') // invalid
@ViewChild(SelectComponent) // valid