Динамическая загрузка компонентов в угловых 2
Я использовал динамический загрузчик компонентов, чтобы прочитать имена компонентов из массива, который заполняется службой, а затем загрузить компоненты на странице.
Я использовал метод API loadIntoLocation, но поскольку он отсутствует в последней версии angular, мне нужно заменить его на @ViewChild для последней версии.
Вот пример рабочего плунжера, который я нашел в каком-то другом потоке, который использует resolComponent для динамического добавления компонентов.
(Пожалуйста, смотрите ссылку на плункер как комментарий ниже. Поскольку я набираю это на мобильном устройстве, я не могу вставить код, и без кода я не могу вставить ссылку на плункер)
Однако я бы хотел немного изменить реализацию. Прямо сейчас app.ts передает массив компонентов для загрузки в компонент Tabs. Здесь я использую @ViewChild для загрузки всех компонентов на странице.
Я хотел бы также передать ссылку @ViewChild из app.ts, чтобы я мог определить:<div #target></div> (где компоненты должны быть отображены) внутри файла App.ts. Прямо сейчас он присутствует внутри Tabs.ts, но я не хочу определять его внутри компонента Tabs. Я хочу сделать Tabs.ts базовым классом, который другие компоненты могут использовать для динамической загрузки своих компонентов.
Итак, по сути, каждый компонент будет иметь свой собственный шаблон, например:
//Component 1
Template: <div #left></div>
<div #right></div>
@ViewChild('left') child1
@ViewChild('right') child2
(Now pass these ViewChild references child1 and child2 to the component builder Tabs component so that I can control from component1 where to render these children)
//Do this for multiple components