«Угловой способ» заключается в использовании привязки данных:
В вашем вопросе недостаточно информации для создания полного примера, но следующее должно показать концепцию:
Раздел
export interface Section {
name: string;
questions: Question[];
}
FormContainerComponent
export class FormContainerComponent {
questionnaire: Section[] = [];
}
form-container.template.html
Теперь просто слушайте капли и добавляйте элементы к своей анкете. Просмотр будет обновляться автоматически.
в FormContainerComponent add
@HostListener('drop', ['$event'])
handleContainerDrop(event) {
// your logic to create "theDroppedSection"
this.questionnaire.push(theDroppedSection);
}
Предполагая, что вы не хотите, чтобы всегда был один единственный html-вход элемент как элемент управления формой, вы можете создать один угловой компонент для каждого «типа управления» и создать что-то вроде FormControlContainer, который отвечает за загрузку нужного типа.
Остаться в примере вопросника: Создать на «QuestionComponent », который может загружать различные типы вопросов, например «YesNoQuestionComponent», «SingleTextInputQuestionComponent», ...
Это объясняется в https://angular.io/guide/dynamic-component-loader - просто замените их «AdBannerComponent» на «QuestionComponent» и посмотреть типы вопросов как «AdItem».
В данный момент библиотека размещена на jcenter. Добавьте в ваш верхний файл build.gradle:
allprojects {
repositories {
jcenter()
}
}