Как динамически отображать различные угловые компоненты с уникальными привязками @Input () и @Output () с использованием ⇐ Javascript

[Anonymous]

Я строю динамический двигатель пользовательского интерфейса в Angular (V15+), где мне нужно загружать различные компоненты во время выполнения на основе конфигурации. Каждый из этих компонентов имеет разные свойства @Input () и @Output (). /> Подпишитесь на события @Output () в целом < /p>
Чистое уничтожение или заменить компоненты при необходимости < /p>

Код: Выделить всё

    const componentConfigs = [
{
component: ButtonComponent,
inputs: { label: 'Click Me' },
outputs: { clicked: () => alert('Button clicked') },
},
{
component: CardComponent,
inputs: { title: 'Card Title', content: 'Lorem ipsum' },
outputs: { selected: data => console.log(data) },
},
];

loadComponent(config) {
const componentRef = this.container.createComponent(config.component);

// How to set `@Input()` and bind `@Output()` safely?
}

Мои вопросы:
Как я могу динамически связать произвольные @input () и @output () с использованием createcomponent ()? @Output () При уничтожении компонентов? Большинство примеров показывают, как динамически загрузить один статический компонент, но я ищу гибкий шаблон, который поддерживает многие компоненты с уникальными привязками.

Подробнее здесь: https://stackoverflow.com/questions/796 ... -input-and