Ссылка на сервис из динамически добавляемого компонента в Angular 6 CLI

Question

Я создал директиву Angular 6 с именем 'DeleteDirective' и ссылку на службу 'DeleteService', чтобы убедиться, что я могу удалить элемент из своего приложения.После того, как элемент помечен как удаленный (в фоновом режиме PHP), я покажу элемент Undo через 'UndoComponent', который я динамически добавил в DeleteService.Пока проблем нет.

@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
    }
} 

Кажется, я не могу сослаться на ListService (или любой другой сервис) из этого динамически добавляемого компонента в DOM,Возвращает 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.');
    }
}