Angular 5：无法从列表项指令获取ng-template内的Grip指令

问题核心原因 #

你碰到的问题本质是对@ContentChild的适用场景理解偏差：

• @ContentChild专门用于查询**内容投影（通过<ng-content>插入的内容）**里的子组件/指令，也就是父组件传递到当前指令宿主元素内部的外部内容。
• 但你的代码里，带[grip]的元素是通过ngTemplateOutlet动态渲染到ListItem指令所在的<div>内部的，属于该元素的视图子节点，并非内容投影节点，所以@ContentChild根本找不到它。

直接解决方案：替换为@ViewChild #

把ListItem中的@ContentChild换成@ViewChild即可，Angular 8+版本默认static: false，可以省略该配置：

@Directive({ selector:'[item]' })
export class ListItem{
  @ViewChild(Grip) grip: Grip; 
}

进阶场景处理 #

如果你的模板里可能存在多个[grip]指令，或者需要确保视图完全渲染后再访问实例，可以做以下调整：

1. 使用@ViewChildren获取所有Grip实例：

import { QueryList, ViewChildren } from '@angular/core';

@Directive({ selector:'[item]' })
export class ListItem{
  @ViewChildren(Grip) grips: QueryList<Grip>;

  ngAfterViewInit() {
    // 视图初始化完成后才能安全访问QueryList
    console.log(this.grips.first);
  }
}

2. 在ngAfterViewInit生命周期钩子中操作grip实例，这是Angular确保视图渲染完成的时机。

内容的提问来源于stack exchange，提问作者Anthony Johnston