0

К примеру имеем такое:

<body>
    <form-component>
        <index-component></index-component>
    </form-component>
</body>

При нажатии кнопки в form-component как заменить index-component, на(например) enter-component.

P.S. Url менять не надо, т.е. это должно быть на одной странице, без маршрутизации.

P.P.S. Я думал что есть более правильный вариант для этих целей, это ведь Angular2 :) его так хвалят, а ngIf мне кажется не совсем правильный вариант, хоть и может сработать. Я попробую ngIf, но я стремлюсь использовать технологии правильно. Например если таких компонентов будет более 10ти? Мне кажется ngIf будет не совсем лучшим решением.

1
  • например использовать ngIf и какое-то булевое свойство показывающее какой из компонентов показывать
    – Grundy
    11 ноя 2016 в 21:27

2 ответа 2

0

Вы можете использовать структурные директивы: здесь достаточно ясные примеры использования. В частности, <ng-template> используется в для создания т. н. editors - виджетов-редакторов ячеек в таблицах (там чаще всего два отображения - вьювер и редактор).

И использование ngIf в данном случае достаточно оправдано, во всяком случае в сравнении с динамическим инстансом компонентов.

<ng-template [ngIf]="lessons" [ngIfElse]="loading">
   <div class="lessons-list">
        ... 
   </div>
</ng-template>

<ng-template #loading>
   <div>Loading...</div>
</ng-template>

<ng-template #lessons>
   <ul>
       <li></li>
       <li></li>
       <li></li>
       ...
   </ul>
</ng-template>
1
  • Добро пожаловать на русскоязычный StackOverflow и спасибо за ответ! Чтобы сделать его более полным и полезным как отвечающим, так и будущим посетителям, пожалуйста, дополните его примером, не ограничиваясь ссылкой на сторонний блог.
    – Lyth
    7 ноя 2017 в 10:02
-1

Вот статья как это делается правильно - http://blog.rangle.io/dynamically-creating-components-with-angular-2/. Нужно использовать entryComponents в декораторе чтобы фреймворк знал какие фабрики компонентов ему понадобятся. Можно компилить любой компонент на лету и без entryComponents но тогда вам понадобится Compiler from angular/core, который не доступен в Ahead of Time compilation. То есть полностью динамическая компиляция компонента когда вы не знаете что будет скомпилировано в нутри текущего компонента доступна только в JIT.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.