В Angular Как мне заполнить свойство из html

Question

Я создал компонент под названием Wizard, который имеет два свойства: Разделы и шаги

вот отрывок из компонента

import { Component, Input, OnInit } from '@angular/core';
import { Section } from './models/section';
import { Step } from './models/step';

@
  Component({
    styleUrls: ['wizard.component.css'],
    selector: 'sym-wizard',
    templateUrl: './wizard.component.html'
  })
export class WizardComponent implements OnInit {

  @Input() sections: Section[];
  @Input() steps: Step[];

  currentStep: Step;
  constructor() {

  }
}

Как я могу заполнить свойства из вид HTML, чтобы следующие элементы заполняли свойства раздела и шагов?

<sym-wizard>
  <sections>
    <section name="name1"></section>
    <section name="name2"></section>
    <section name="name3"></section>
  </sections>

  <steps>
    <step name="step1" section="name1">
    </step>
    <step name="step2" section="name1"></step>
    <step name="step3" section="name2"></step>
    </steps>
</sym-wizard>

Answer 1

Вы можете сделать это в своей WizardComponent:

демонстрации Stackblitz

  @ContentChildren(StepComponent, { descendants: true }) 
  _steps: QueryList<StepComponent>;

  @ContentChildren(SectionComponent, { descendants: true })
  _sections: QueryList<StepComponent>;

  ngAfterViewInit() {
    console.log(this._steps.toArray().length);
    console.log(this._sections.toArray().length);
  }

Answer 2

Думаю, это то, что вы ищете: Stackblitz
Я использовал div в этом примере, но должен работать и для всего остального.

Answer 3

Вы можете проверить @ContentChilren декоратор. Angular документы . Если я вас правильно понял, это то, что вам нужно. Итак, в вашем случае это будет примерно так:

@ContentChildren("section") sectionsQuery!: QueryList<SectionComponent>;

А затем в AfterViewInit hook:

ngAfterViewInit() {
    this.sections = this.sectionsQuery?.map(section => ({name: section.name}));
}

Надеюсь, что это поможет.