Angular中通过指令向子组件传递参数问题求助

我来帮你排查下问题所在，你遇到的undefined主要有几个核心原因，咱们一步步修正：

1. 生命周期钩子调用时机不对 #

@ViewChildren的查询结果要等到视图完全初始化完成后才会可用，ngOnInit钩子触发时，子组件的视图还没渲染完毕，此时gc这个QueryList是空的，直接访问name自然会得到undefined。

你需要把打印逻辑放到ngAfterViewInit钩子中，这是Angular官方推荐的获取视图查询结果的时机：

import { Component, OnInit, AfterViewInit, ViewChildren, QueryList } from '@angular/core';
import { GrandChildDirective } from './grand-child.directive';

@Component({ 
  selector: 'child-component', 
  templateUrl: './child-component.component.html', 
  styleUrls: ['./child-component.component.scss'] 
})
export class ChildComponent implements OnInit, AfterViewInit { // 别忘了实现AfterViewInit接口
  @ViewChildren(GrandChildDirective) gcList!: QueryList<GrandChildDirective>; // 变量名建议更清晰，比如gcList

  constructor() { }

  ngOnInit() {
    // 这里还拿不到ViewChildren的查询结果
  }

  ngAfterViewInit() {
    // 现在可以正常访问指令实例集合了
    const names = this.gcList.map(gcInstance => gcInstance.name);
    console.log(names); // 预期会得到["Ghandy", "Ani", "Budi"]
  }
}

2. 错误访问QueryList的属性 #

你之前写的console.log(gc.name)是直接访问QueryList的name属性，但QueryList是一个集合对象，它本身没有name属性。你需要遍历集合里的每个指令实例，才能拿到单个实例的name值——上面代码里用map方法提取每个实例的name组成数组，就是正确的做法。

3. 父组件模板的绑定问题 #

看你的父组件模板：

<grand-child-directive [name]='Ghandy'></grand-child-directive>

这里的[name]='Ghandy'是在绑定父组件类中的变量Ghandy，而不是字符串"Ghandy"。如果父组件类里没有定义这个变量，Angular会把它解析为undefined，导致指令的name输入属性也变成undefined。

你有两种修正方式：

• 如果要绑定字符串字面量，用双引号包裹：

<child-component>
  <grand-child-directive [name]="'Ghandy'"></grand-child-directive>
  <grand-child-directive [name]="'Ani'"></grand-child-directive>
  <grand-child-directive [name]="'Budi'"></grand-child-directive>
</child-component>

• 如果要绑定父组件的变量，确保父组件类中定义了这些变量：

// 父组件类中
Ghandy = "Ghandy";
Ani = "Ani";
Budi = "Budi";

额外建议：遵循Angular命名规范 #

Angular推荐类名使用大驼峰（PascalCase），比如你的指令类gc应该改成GrandChildDirective，子组件类childComponent改成ChildComponent；变量名使用小驼峰（camelCase），这样代码更易读，也符合社区通用规范。

修正后的指令类示例：

import { Directive, Input } from '@angular/core';

@Directive({ selector: 'grand-child-directive' })
export class GrandChildDirective { 
  @Input() name!: string; 
}

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