Как изменить порядок элементов DOM (компонента) по правилам заказа, дополненный вопрос? - PullRequest
Новая
       5

Как изменить порядок элементов DOM (компонента) по правилам заказа, дополненный вопрос?

0 голосов
/ 05 ноября 2019

Мне кажется, этот вопрос должен быть интересным.

У меня есть компонент, который создает и возвращает реактивную форму: 

@Component({
  selector: 'app-form',
  template: `
    <div class="form"><form [formGroup]="form"></form></div>
  `,
})
export class App {
  form: FormGroup;
  @ViewChildren(FormComponent) formsComponent: QueryList<FormComponent>

  ngAfterViewInit() {
    this.formsComponent.forEach(form => console.log(form));
  }
}

Существуют правила, определяющие порядок отображения форм, когдаодна форма может содержать другую форму. 

{"formGroup1": ["formGroup2"]},
{"formGRoup2" ["formGroup3"]}

Код Json выше говорит, что formGroup2 должен быть помещен в formGroup1, а FormGroup3 и в formGroup2, поэтому в результате мне нужночтобы получить структуру HTML: 

<div class="form">
    <form [formGroup1]="form">
       <div class="formGroup2">
           <form [formGroup2]="form">
               <div class="form">
                  <form [formGroup3]="form"></form>
               </div>
           </form>
       </div>
    </form>
</div>

Таким образом, возникает вопрос, как изменить порядок QueryList и перестроить DOM?

Я пытался применить этот ответ:

Как переупорядочить детей с помощью ContentChildren и QueryList

...