Angular 6动态添加组件无法引用ListService问题求助

我来帮你一步步排查并解决这个问题，核心原因是组件定义和动态创建时的注入逻辑有错误：

1. 修正UndoComponent的装饰器 #

你把UndoComponent错误标记为@Injectable()了！它是一个Angular组件，必须使用@Component装饰器，否则Angular无法正确处理它的依赖注入流程。请修改成这样：

import { Component, OnInit } from '@angular/core';
import { ListService } from './path-to-your-list-service';

@Component({
  selector: 'app-undo',
  templateUrl: './undo.component.html', // 确保路径与实际文件匹配
  // 可选：添加样式文件
  // styleUrls: ['./undo.component.css']
})
export class UndoComponent implements OnInit {
  currentList: any; // 建议替换为你的List类型

  constructor(private listService: ListService) { }

  ngOnInit(): void {
    // 可选：初始化逻辑
  }

  restoreItem() {
    this.currentList = this.listService.getSelectedList();
    console.log(this.currentList); // 现在应该能获取到正确值了
  }
}

2. 动态创建组件时传递正确的注入器 #

在DeleteService的addUndoElement方法中，你创建组件时没有传入注入器参数，导致组件无法连接到应用的根注入器，自然拿不到ListService的单例实例。修改factory.create的调用：

addUndoElement() {
  const factory = this.factoryResolver.resolveComponentFactory(UndoComponent);
  // 传入ViewContainerRef的注入器，确保组件能正确获取依赖
  const component = factory.create(this.rootViewContainer.injector);
  
  this.appRef.attachView(component.hostView);
  const domElem = (component.hostView as EmbeddedViewRef<any>)
    .rootNodes[0] as HTMLElement;
  document.body.appendChild(domElem);
  
  // 可选：保存组件引用，方便后续销毁或更新
  this.undoComponentRef = component;
}

3. 修正DeleteDirective的服务注入方式 #

你的DeleteDirective中直接使用了未注入的service变量，这会导致上下文混乱。应该在构造函数中显式注入DeleteService：

@Directive({ selector: '[appDelete]' })
export class DeleteDirective {
  constructor( 
    private viewContainerRef: ViewContainerRef, 
    private renderer: Renderer2,
    private deleteService: DeleteService // 注入DeleteService
  ) {
    this.deleteService.renderer = renderer;
    this.deleteService.setRootViewContainerRef(viewContainerRef);
    this.deleteService.addUndoElement();
  }

  @HostListener('click') onClick() {
    // 执行你的删除逻辑
    this.deleteService.showUndoElement();
  }
}

问题根源总结 #

• UndoComponent误用@Injectable装饰器，导致Angular无法初始化组件的依赖注入系统。
• 动态创建组件时未传递注入器，使得组件无法访问应用根注入器中的ListService单例。

按照以上步骤修改后，UndoComponent就能正常获取ListService中的currentList值了。

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