Как обеспечить входы и выходы для динамических компонентов

Question

Я столкнулся с пакетом https://github.com/gund/ng-dynamic-component, борясь с Angular ngComponentOutlet unacheiveable @Inputс и @Outputс взаимодействий.

В моем приложении я хотел бы динамически создавать экземпляры различных типов компонентов вкладок в *ngFor,

Чтение документации https://github.com/gund/ng-dynamic-component, взаимодействие с @Inputс и @Outputs не находится в шаблоне HTML, а в самой реализации компонента.

Учитывая тот факт, что мне нужно запустить все мои вкладки, каждая вкладка должна получить разные @Input и подписаться на разные данные @Outputна основе его экземпляра, например,

<ndc-dynamic *ngFor="let tab of tabs"
              [ndcDynamicComponent]="component"
              [ndcDynamicInputs]="inputs" <!-- this needs to be different for each tab-->
              [ndcDynamicOutputs]="outputs"> <!-- this needs to be different for each tab-->
</ndc-dynamic>

За исключением повреждения моего объекта вкладки inputs а также outputs член или создание специального интерфейса, такого как:

interface DynamicTab {
  tab: Tab,
  inputs: any,
  outputs: any
}

Есть идеи, как реализовать такое поведение? какой-то способ эффективно использовать *ngFor и манипулировать основным inputs с текущей вкладкой?

Я мог бы создать два метода для моего компонента для расчета необходимых входов и выходов, но все эти параметры кажутся слишком большими, чтобы манипулировать текущим tab Данные, которые у меня уже есть во время работы с *ngFor

Заранее спасибо за любые идеи!

Answer 1

У меня есть следующее:

<mat-tab-group>
  <mat-tab *ngFor="let tab of tabs" label="{{tab.label}}">
    <ng-container *ngComponentOutlet="tab.component;injector:createInjector(tab.data)"></ng-container>
  </mat-tab>
</mat-tab-group>

Вкладки - это объект массива с моим компонентом дифференциалов, каждый компонент помещается в каждую вкладку.

это моя модель о вкладке:

export interface CwcTabModel {
  label?: string;
  component?: any;
  data?: CwcDataTab;
}


export class CwcDataTab {
  data?: any;
}

CwcDataTab - это данные для отправки каждому компоненту, а с помощью инжектора - это когда передаются данные.

И теперь вы можете создать тестовый компонент, например:

TestTabOneComponent:

@Component({
  selector: 'app-test-tab-one',
  templateUrl: './test-tab-one.component.html',
  styleUrls: ['./test-tab-one.component.scss']
})
export class TestTabOneComponent implements OnInit {

  information: string;

  constructor(private dataTab: CwcDataTab) {
   if (this.dataTab !== undefined && this.dataTab.data !== undefined) {
     this.information = this.dataTab.data;
   }
  }

}

Затем для использования вкладок компонента вы можете создать в каком-либо компоненте вкладки объекта:

tabs = [
  {
    label: 'TAB1',
    component: TestTabOneComponent, /* it will be a dynamic component, but data should be different*/
    data: {
      data: 'value1 valor distinto, mismo componente'
    }
  },
  {
    label: 'TAB2',
    component: TestTabOneComponent, /* it will be a dynamic component, but data should be different*/
    data: {
      data: 'value2 valor distinto, mismo componente'
    }
  },
{
    label: 'TAB3',
    component: TestTabOneComponent, /* it will be a dynamic component, but data should be different*/
    data: {
      data: 'value3 valor distinto, mismo componente'
    }
  }
];

И на каждой вкладке используется один и тот же компонент (может быть общим компонентом), и в каждом компоненте вы можете видеть разные данные. извините мой английский, я надеюсь, что вы можете использовать это.