Question

在我的node_modules（valor-software）中安装问题后，我正在尝试修复ng2-select库npm install --save ng2-select中的问题，我想使用SelectComponent作为Child注入@ViewChild但我总是未定义。它显得非常微不足道，我在项目的github中看到了评论，这似乎对许多人有用。我正在angular/CLI project如果我要添加更多信息，请在评论中提及。谢谢。

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;
     .....
}

mycomponent：

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

您应该使用@ViewChild方法访问ngAfterViewInit，但在调用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

无法导入ng2-select SelectComponent

1 个答案: