Angular中@ViewChild获取PlaceholderDirective为undefined的原因排查

核心问题：未在setter中存储指令实例 #

你的代码里，@ViewChild装饰器绑定到了setter方法，但没有把传入的指令实例赋值给组件属性，仅执行了日志打印，导致this.toastPlaceholder始终为undefined。

修复步骤 #

1. 修正@ViewChild的setter逻辑 #

修改ToastMessagesComponent，在setter中存储指令实例：

@Component({
  selector: 'app-toast-messages',
  templateUrl: './toast-messages.component.html',
  styleUrls: ['./toast-messages.component.css'],
})
export class ToastMessagesComponent implements OnInit, OnDestroy, AfterViewInit {
  toastSubscribe: Subscription;
  // 新增私有属性存储指令实例
  private _toastPlaceholder: PlaceholderDirective;

  // 修改setter，保存指令引用
  @ViewChild(PlaceholderDirective) set toastPlaceholder(pd: PlaceholderDirective) {
    this._toastPlaceholder = pd;
    console.log("placeholder is set", pd);
  }

  constructor(private messagingService: MessagingService) {}

  ngOnInit() {
    this.toastSubscribe = this.messagingService.toastList.subscribe(
      (msg: ToastMessage) => this.showToast(msg)
    );
  }

  ngOnDestroy() {
    this.toastSubscribe.unsubscribe();
  }

  ngAfterViewInit() {
    console.log("ngAfterViewInit here", this._toastPlaceholder);
  }

  showToast(msg: ToastMessage) {
    // 先检查实例是否存在，避免报错
    if (!this._toastPlaceholder) {
      console.warn("Toast placeholder not initialized yet");
      return;
    }
    const hostViewContainerRef = this._toastPlaceholder.viewContainerRef;

    const componentRef = hostViewContainerRef.createComponent(ToastComponent);
    componentRef.instance.prepare(msg);
  }
}

2. 验证指令的模块声明 #

确保PlaceholderDirective已在Angular模块（如AppModule）的declarations数组中声明，否则Angular无法识别该指令：

@NgModule({
  declarations: [
    // ...其他组件/指令
    PlaceholderDirective,
    ToastMessagesComponent,
    ToastComponent
  ],
  // ...其他配置项
})
export class AppModule { }

3. 可选：简化写法（无需setter时） #

如果不需要监听指令的赋值过程，可直接用普通@ViewChild声明：

@ViewChild(PlaceholderDirective) private _toastPlaceholder: PlaceholderDirective;

额外说明 #

Angular 8+ 中@ViewChild默认static: false，指令实例会在ngAfterViewInit钩子后可用，完全匹配你的使用场景，无需修改static参数。

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