В текущих официальных документах показано только, как динамически изменять компоненты внутри тега <ng-template>
. https://angular.io/guide/dynamic-component-loader
То, чего я хочу достичь, скажем, у меня есть 3 компонента: header
, section
и footer
со следующими селекторами:
<app-header>
<app-section>
<app-footer>
А затем есть 6 кнопок, которые будут добавлять или удалять каждый компонент: Add Header
, Add Section
и Add Footer
и когда я нажимаю Add Header
, страница добавляет <app-header>
к странице, которая ее отображает, поэтому страница будет содержать:
<app-header>
А потом, если я дважды нажму Add Section
, страница будет содержать:
<app-header>
<app-section>
<app-section>
И если я нажму Add Footer
, страница будет теперь содержать все эти компоненты:
<app-header>
<app-section>
<app-section>
<app-footer>
Можно ли добиться этого в Angular? Обратите внимание, что ngFor
- это не то решение, которое я ищу, поскольку оно позволяет добавлять на страницу одни и те же компоненты, а не разные компоненты.
ОБНОВЛЕНИЕ: ngIf
и ngFor
это не решение, которое я ищу, так как шаблоны уже предопределены. Я ищу что-то вроде стека component
или array
из component
, где мы можем легко добавлять, удалять и изменять любой индекс array
.
ОБНОВЛЕНИЕ 2: Чтобы сделать это более ясным, давайте иметь другой пример того, почему ngFor
не работает. Допустим, у нас есть следующие компоненты:
<app-header>
<app-introduction>
<app-camera>
<app-editor>
<app-footer>
Теперь появился новый компонент, <app-description>
, который пользователь хочет вставить между ними и <app-editor>
. ngFor
работает, только если есть один и тот же компонент, который я хочу повторять снова и снова. Но для разных компонентов ngFor
здесь не работает.