Как ждать аппендикса

Question

У меня есть метод addcomponent, который принимает component_factory и целевой узел в качестве аргументов

this dragdropservice.ts

addComponent(componentClass: ComponentFactory<any>, target) {
    let componentRef: ComponentRef<any> = this.container.createComponent(componentClass);
    setTimeout(() => {
        target.appendChild(window.document.getElementById(componentRef.instance.index))
    }, 0);
}

Я использую этот метод при перетаскивании компонентов и это нормально работает, но моя проблема заключается в том, чтобы при вызове этого метода воспроизвести сохраненные компоненты из базы данных. Некоторые компоненты используются в качестве целей, но проблема заключается в заданном времени ожидания. как ждать окончания тайм-аута, чтобы добавить следующий компонент

layoutcomposition.ts

ngOnInit() {


   this.route.queryParamMap.subscribe((paramMap: ParamMap) => {
  var id = paramMap.get('id');
  if (id) {
    console.log(id)
    this.savestate.getcomponents(id).subscribe(
      data => {




        for (var i = 0; i < data['data'].length; i++) {

          if (data['data'][i].selector === 'app-col') {


            var colcomponent = new Col(this.factoryResolver)
            if (data['storetargetid'][i] === "content") { 
             this.dragDropService.addComponent(colcomponent.component,document.getElementById("content"))

            }
else {
                  var arr =data['storetargetid'][i].split("-",2)
                  this.dragDropService.addComponent(colcomponent.component,document.getElementById(arr[0]).children[0].children[arr[1]])

            }
          }



        }

storetargetid - это место, где я храню идентификаторы целей при удалении компонентов

Answer 1

Вам не нужно использовать setTimeout для симуляции асинхронных операций (если только вам не нужна поддержка старых браузеров). В этом случае достаточно просто добавить async перед функцией:

async addComponent(componentClass: ComponentFactory<any>, target) {
    let componentRef: ComponentRef<any> = this.container.createComponent(componentClass);
    target.appendChild(window.document.getElementById(componentRef.instance.index));
}

Вы указываете, что setTimeout предназначен для решения проблемы DOM. Есть некоторые ошибки браузера, которые должны быть обработаны таким образом, но я проверю, чтобы убедиться, что это не связано с состоянием гонки или асинхронной c проблемой, которую вы должны исправить напрямую.
Вы можете обернуть setTimeout в Обещание, чтобы вы могли его дождаться.

addComponent(componentClass: ComponentFactory<any>, target) {
    let componentRef: ComponentRef<any> = this.container.createComponent(componentClass);
    return new Promise((res,rej) => {
      setTimeout(() => {
        target.appendChild(window.document.getElementById(componentRef.instance.index));
        res();
      }, 0);
    });
}

Обратите внимание, что функция внутри подписки выполнена async. Теперь вы можете поставить await перед вызовом addComponent, чтобы он дождался окончания операции до sh, прежде чем продолжить.

ngOnInit() {


   this.route.queryParamMap.subscribe((paramMap: ParamMap) => {
  var id = paramMap.get('id');
  if (id) {
    console.log(id)
    this.savestate.getcomponents(id).subscribe(
      async (data) => {




        for (var i = 0; i < data['data'].length; i++) {

          if (data['data'][i].selector === 'app-col') {


            var colcomponent = new Col(this.factoryResolver)
            if (data['storetargetid'][i] === "content") { 
             await this.dragDropService.addComponent(colcomponent.component,document.getElementById("content"))

            }
else {
                  var arr =data['storetargetid'][i].split("-",2)
                  await this.dragDropService.addComponent(colcomponent.component,document.getElementById(arr[0]).children[0].children[arr[1]])

            }
          }



        }