Question

我遇到了ng-dynamic-component程序包，同时又遇到了Angular的ngComponentOutlet和@Input的交互作用。

在我的应用程序中，我想动态实例化@Output中不同类型的选项卡组件。

阅读ng-dynamic-component文档，与*ngFor和@Input进行交互并不是在HTML模板中，而是在组件实现本身中。

考虑到我需要在所有选项卡上运行的事实，每个选项卡需要获取不同的@Output并根据其实例（例如，@Input订阅不同的数据>

@Output

除了使用<ndc-dynamic *ngFor="let tab of tabs" [ndcDynamicComponent]="component" [ndcDynamicInputs]="inputs"  [ndcDynamicOutputs]="outputs">  </ndc-dynamic>和inputs成员破坏我的标签对象外，或者创建一个特殊的接口，例如：

outputs

任何想法如何实现这种行为？有什么方法可以充分利用interface DynamicTab { tab: Tab, inputs: any, outputs: any }并在当前标签页中操作基本的*ngFor？

我可以在我的组件上创建两个方法来计算所需的输入和输出，但是这些选项似乎都太费力了，无法处理在运行{{1}时我已经拥有的当前inputs数据}}

在此先感谢您提供任何见解！

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>

选项卡是具有我的differents组件的数组对象，每个组件都放在每个选项卡中。

这是我关于标签的模型：

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


export class CwcDataTab {
  data?: any;
}

CwcDataTab是要发送到每个组件的数据，并且与进样器一起传递数据时。

现在您可以创建一个Test组件，例如：

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'
    }
  }
];

每个选项卡使用相同的组件（可以是通用组件），并且在每个组件中您可以看到不同的数据。抱歉，我的英文，希望您可以使用。

如何为动态组件提供输入和输出

1 个答案: