Question

我有一个指令：

@Directive({
  selector: '[myDirective]'
})

export class MyDirective implements AfterViewInit {
  @ViewChild('wrapper') wrapper;
  @ViewChild('list') list;

  ngAfterViewInit() {

    // Both of these are undefined 
    console.log(wrapper, list);
  }
}

需要查询视图中使用的变量。

所以说我在我的某个组件MyComponent中有这个模板：

<div #wrapper myDirective>
  <ul #list></ul>
</div>

它需要找到这些变量，但是指令永远不会像我现在这样做。我猜测为什么会这样，因为指令实际上没有视图，ngAfterViewInit运行得太早和/或@ViewChild尝试查找wrapper和{{1}在错误的地方。

如何确保指令可以找到变量？

Answer 1

只需将ViewChild更改为ContentChild即可。我想它应该有用

export class MyDirective implements AfterViewInit {
  @ContentChild('wrapper') wrapper;
  @ContentChild('list') list;

  ngAfterContentInit() {
    console.log(this.wrapper, this.list);
  }
}

<强> Plunker Example

查询指令内的视图变量不起作用

1 个答案: