Как отобразить компонент, созданный в поле класса другого компонента?

Question

[Александр]

Я хочу отобразить компонент app-part-slot, который я создал в классе другого компонента (app-root) следующим образом:

slot: PartSlotComponent = {iconAddress: "assets/CPU.svg", partClassName: "Монитор", partName: "AOC q27g2s/eu", partPrice: 456, partObject: {}};

Я использовал следующий код в шаблоне app-root:

<div>{{ slot }}</div>

и ожидал, что Angular отобразит компонент, содержащийся в поле, но, очевидно, это так не работает, поскольку я получаю только строку [object Object] вместо ожидаемого компонента.

Основная цель — создать список из app-part-slot, текст на которых будет меняться, когда пользователь нажимает на какую-либо карточку товара в каталоге (например: пользователь нажимает на gtx 1080, и слот видеокарты меняет поля partName и partPrice на соответствующие значения). Таким образом, app-part-slot'ы имеют статические поля, которые будут предопределены в родительском классе при создании, и динамические.

Есть какой-то вариант заставить такой код работать, или нужно полностью сменить подход?

P.S: Я знаю про ng-content, но мне кажется, что в моем случае он также не подходит. Пишите, если я не прав

Answer 1

[Антон Швец]

1. вы не создали компонент, я создали объект с полями как у этого компонента.
2. Компонент нужно рисовать с помощью ngComponentOutlet и передавать в него сам класс компонента. Есть и другие способы, но этот самый простой.

Comments

[Александр]

Да,спасибо, уже ответили то же самое на стеке