从 Angular 6 CLI 中动态添加的组件引用服务答案

【问题标题】：Reference to service from dynamically added component in Angular 6 CLI从 Angular 6 CLI 中动态添加的组件引用服务
【发布时间】：2019-02-09 11:57:34
【问题描述】：

我在 Angular 6 中创建了一个名为“DeleteDirective”的指令，并引用了服务“DeleteService”，以确保我可以从我的应用程序中删除一个项目。在项目被标记为已删除后（在 PHP 后端），我将通过我在 DeleteService 中动态添加的“UndoComponent”显示一个撤消元素。到目前为止没有问题。

@Directive({
  selector: '[appDelete]'
})

export class DeleteDirective {
constructor(
        @Inject(ViewContainerRef) viewContainerRef,
        renderer: Renderer2
    ) {
        service.renderer = renderer;
        service.setRootViewContainerRef(viewContainerRef);
        service.addUndoElement();
    }

@HostListener('click') onClick() {
    // (Some code to execute deletion)
    this.deleteService.showUndoElement();

}

@Injectable({
    providedIn: 'root'
})
export class DeleteService {
constructor(
        rendererFactory: RendererFactory2,
        private factoryResolver: ComponentFactoryResolver,
        private appRef: ApplicationRef,
    ) {
        this.renderer = rendererFactory.createRenderer(null, null);
        this.factoryResolver = factoryResolver;
    }

setRootViewContainerRef(viewContainerRef) {
    this.rootViewContainer = viewContainerRef;
}

addUndoElement() {
        const factory = this.factoryResolver.resolveComponentFactory(UndoComponent);
        const component = factory.create(this.rootViewContainer);
        // this.rootViewContainer.insert(component.hostView);
        this.appRef.attachView(component.hostView);
        const domElem = (component.hostView as EmbeddedViewRef<any>)
            .rootNodes[0] as HTMLElement;
        document.body.appendChild(domElem);
    }
}

现在，在 UndoComponent HTML 中，我创建了一个链接来撤消操作，名为 restoreItem。我想使用另一个名为ListService 的服务再次获取一些数据。

@Injectable()
export class UndoComponent implements OnInit {

    constructor(private listService: ListService) {

    }

    restoreItem() {
        this.currentList = this.listService.getSelectedList();
        console.log(this.currentList); // null
    }
}

似乎我无法从这个动态添加的组件到 DOM 中引用 ListService（或任何其他服务）。它返回null。任何想法如何从动态添加的组件访问服务？非常感谢任何指示！

编辑：添加 Listservice 存根代码以进行澄清

@Injectable({
  providedIn: 'root'
})
export class ListService {

    lists: List[];
    list: List[];
    currentList: List;

    constructor(private http: HttpClient) { }

setSelectedList(list: List): void {
        this.currentList = list;
    }

    getSelectedList(): List {
        return this.currentList;
    }

    private handleError(error: HttpErrorResponse) {
        console.log(error);
        return throwError('Error! something went wrong.');
    }
}

【问题讨论】：

你怎么称呼restoreItem？尝试将其定义为箭头函数：restoreItem = () => { ... }.
你能展示一下 ListService 的实现吗？

标签： javascript angular

【解决方案1】：

你是否在 ListService 中设置 currentList 的值。

ListService 中的 setSelectedList 永远不会被调用，它用于设置 currentList 的值。所以 currentList 保持为空。

【讨论】：