Angular自定义指令绑定报错，NgModule配置仍出错，求助解决

问题背景 #

正在开发聊天应用界面，需在添加新用户时重新加载组件以测试动画效果。为此编写了自定义指令appReloading，意图监听newUser变量变化来触发组件重载，但当前指令绑定出现问题，即使已声明指令，在NgModule中配置时仍报错。

现有代码 #

home.component.ts #

users: User[] = [
  {name: 'Mike', status: 'online'},
  {name: 'Karla', status: 'away'},
]

newUser:User;

onEnter(buscar:string){ // 添加好友列表
  console.log(buscar)
  this.newUser = {name : buscar , status: 'online'}
  this.users.push(this.newUser)
  const input = document.getElementById('buscar') as HTMLInputElement;
  input.value = '';
  console.log(this.users)
}

home.component.html #

<div class="friends" *appReloading="newUser">
  <cdk-virtual-scroll-viewport appendOnly itemSize="20" class="example-viewport" >
    <div *cdkVirtualFor="let user of users" class="example-item">
      <div *ngIf="user.status === 'online'">
         <i class="fa-solid fa-circle" style="color: #56e184;"></i>
         <button (click)="openChat(user.name)">{{user.name}}</button>
      </div>

      <div *ngIf="user.status === 'away'">
        <i class="fa-solid fa-circle" style="color: #e1df56;"></i>
        <button (click)="openChat(user.name)">{{user.name}}</button>
     </div>

     <div *ngIf="user.status === 'offline'">
      <i class="fa-solid fa-circle" style="color: #e15656;"></i>
      <button (click)="openChat(user.name)">{{user.name}}</button>
   </div>

    </div>
  </cdk-virtual-scroll-viewport>
</div>

自定义指令代码 #

@Input() newUser : any;

constructor(private templateRef: TemplateRef<any>,
            private viewContainerRef : ViewContainerRef
) {
  this.viewContainerRef.createEmbeddedView(templateRef)
}

ngOnChanges(changes:SimpleChanges):void{
  if(changes['newUser']){
    this.viewContainerRef.clear();
    this.viewContainerRef.createEmbeddedView(this.templateRef)
  }
}

问题分析 #

1. 结构型指令绑定错误：使用*appReloading语法糖时，指令的输入属性需与选择器名称匹配，当前@Input() newUser不符合Angular结构型指令的绑定规则。
2. NgModule配置问题：指令未在模块中正确声明/导出，导致组件无法识别该指令。
3. 冗余的组件重载需求：Angular变更检测机制本可自动更新列表，push数组的可变操作可能未触发变更检测，而非需要手动重载组件。

解决方案 #

1. 修复自定义指令的绑定逻辑 #

调整指令的输入属性，匹配结构型指令的语法要求：

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

@Directive({
  selector: '[appReloading]'
})
export class ReloadingDirective {
  // 输入属性与选择器同名，适配*语法糖的绑定规则
  @Input() set appReloading(newValue: any) {
    this.viewContainerRef.clear();
    this.viewContainerRef.createEmbeddedView(this.templateRef);
  }

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainerRef: ViewContainerRef
  ) {
    this.viewContainerRef.createEmbeddedView(this.templateRef);
  }
}

2. 正确配置NgModule #

确保指令在模块中声明，如需跨模块使用则需导出：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScrollingModule } from '@angular/cdk/scrolling'; // 导入cdk滚动模块
import { ReloadingDirective } from './reloading.directive';
import { HomeComponent } from './home.component';

@NgModule({
  declarations: [
    HomeComponent,
    ReloadingDirective // 声明指令
  ],
  exports: [
    ReloadingDirective // 跨模块使用时导出
  ],
  imports: [
    BrowserModule,
    ScrollingModule // 必须导入才能使用cdk-virtual-scroll
  ]
})
export class AppModule { }

3. 优化组件逻辑，避免手动重载 #

通过不可变数组操作触发Angular变更检测，无需依赖自定义指令即可更新列表：

onEnter(buscar:string){
  console.log(buscar)
  const newUser = {name : buscar , status: 'online'}
  // 使用扩展运算符创建新数组，触发变更检测
  this.users = [...this.users, newUser];
  const input = document.getElementById('buscar') as HTMLInputElement;
  input.value = '';
  console.log(this.users)
}

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