Передайте @Input, поскольку параметры срабатывают. Тип «строка» не имеет общих свойств с типом.

Я создаю компоненты на основе динамических вкладок и передаю необходимые свойства компонента для создания компонента через объект.

Как передать @Input в качестве параметра, а затем использовать ввод с ComponentFactoryResolver и создать ввод.

Вот объект для хранения необходимых свойств компонента вкладки,

Вот StackBlitz

вкладка-item.ts

import { Type, Input } from '@angular/core';

export class TabItem {

    componentLoaded = false;

    constructor(public title: string, public active: boolean, public component: Type<object>, public inputs: Input[] = []) {

    }
}

вкладка-component.ts

import { Component, OnInit, Input, ComponentFactoryResolver, ComponentFactory, Injector, ApplicationRef, ElementRef } from '@angular/core';
import { TabItem } from 'src/app/models/tab-item';

@Component({
    selector: 'app-tab',
    template: `
              <div class="row">
                <div class="col-2">
                   <ul class="nav flex-column">
                      <li class="nav-item" *ngFor="let tab of tabItems">
                         <a class="nav-link" (click)="setActiveTabItem(tab)" [class.active]="tab.active" [id]="tab.title+'-tab'"
                           data-toggle="tab" [href]="'#' + tab.title" role="tab" [attr.aria-controls]="tab.title"
                           aria-selected="true">{{tab.title}}</a>
                      </li>
                  </ul>
              </div>
             <div class="col-10">
                <div id="tab-container" class="tab-content">
               </div>
             </div>
           </div>`,
    styleUrls: ['./tab.component.scss']
})
export class TabComponent implements OnInit {

    @Input() tabItems: TabItem[];
    componentsCreated: ComponentFactory<object>[] = [];

    constructor(private componentFactorResolver: ComponentFactoryResolver, private injector: Injector,
                private app: ApplicationRef,
                private elementRef: ElementRef) { }

    loadTabContent(selectedIndex: number, isHome: boolean = false): void {
        const tabItem = this.tabItems[selectedIndex];
        const componentFactory = 
        this.componentFactorResolver.resolveComponentFactory(tabItem.component);

        // Assign Inputs
        if (tabItem.inputs) {
            tabItem.inputs.forEach((item: Input) => {
                 componentFactory.inputs.push(item);
            });
        }

        const newNode = document.createElement('div');
        newNode.id = tabItem.title;
        document.getElementById('tab-container').appendChild(newNode);

        const ref = componentFactory.create(this.injector, [], newNode);
        this.app.attachView(ref.hostView);
    }
}

Здесь, в приведенном выше коде, я получаю следующую ошибку с componentFactory.inputs.push(item);

Аргумент типа «Ввод» нельзя присвоить параметру типа «{ propName: string; имя_шаблона: строка; }'.

В типе «Ввод» отсутствуют следующие свойства из типа «{ propName: string; имя_шаблона: строка; }': propName, templateNamets(2345)

Наконец, создание элементов вкладки, как показано ниже, и передача их из родительского компонента.

<app-tab [tabItems]="tabItems"></app-tab>


@Input() header = 'Test';
tabItems = [
            new TabItem('Home', true, HomeComponent),
            new TabItem('Profile', false, ProfileComponent),
            new TabItem('Employee', false,  EmployeeComponent, [this.header])
        ];

Здесь ошибка,

Тип 'string' не имеет общих свойств с типом 'Input'.ts(2559)

Это правильный способ передачи входных данных? Если да, то что с этим не так?