如何使用 angular 调用与 html 中的字符串 "component name" 相同的组件 7

Question

我正在尝试使用 angular 7 中的字符串键调用组件。因为我的服务为我提供了组件过滤器将要在每个用户的页面上显示的键。我可以制作这个过滤器，尤其是在 html 中吗？

<pg-tab *ngFor="let tab of tabs; let index = index">
  <ng-template #TabHeading>
    {{tab.headerText}}
  <a (click)="removeTab(index)" style="padding: 5px;"><i class="fa fa-times fa-lg" style="color:orangered;"></i></a>
  </ng-template>
  <div class="row column-seperation" *ngIf="tab.componentName === 'grid-sample'">
    <app-grid-sample></app-grid-sample>
  </div>

  <div class="row column-seperation" *ngIf="tab.componentName === 'pdf-export-sample'">
    <app-pdf-export-sample></app-pdf-export-sample>
  </div>
  <div class="row column-seperation" *ngIf="tab.componentName === 'notify-sample'">
    <app-notify-sample></app-notify-sample>
  </div>
  <div class="row column-seperation" *ngIf="tab.componentName === 'loader-sample'">
    <app-loader-sample></app-loader-sample>
  </div>
  <div class="row column-seperation" *ngIf="tab.componentName === 'tt-form-elements'">
    <app-tt-form-elements></app-tt-form-elements>
  </div>
  <div class="row column-seperation" *ngIf="tab.componentName === 'tt-layouts'">
    <app-tt-layouts></app-tt-layouts>
  </div>
</pg-tab>

我搜索了 innerHtml 属性，但它不适用于该示例中的 angular 组件。

html

<div [innerHTML]="pageDetail"></div>

打字稿

private _pageDetail: string = '<app-tab-page1 [tab]="tab" [tabsLength]="tabs.length" [tabs]="tabs"></app-tab-page1><button>Naber</button>';

public get pageDetail(): SafeHtml {
  return this._sanitizer.bypassSecurityTrustHtml(this._pageDetail);
}

你可以猜到它现在看起来不太好。如果可能的话，我想缩短并清理 html 中的“*ngIf”属性。

你有什么想法吗？

像这样

<div class="row column-seperation" tab.componentName>
  <app-tab.componentName></app-tab.componentName>
</div>

注意：抱歉我的语法错误。

Answer 1

有两种方法：

使用 ngSwitch 对减少 html 代码没有多大帮助。
使用 ngComponentOutlet 可以从父组件代码而不是模板提供要显示的组件。

#2 的示例：

模板：

<div>
... some other code
 <ng-template matTabContent>
     <ng-container *ngComponentOutlet="screen.component; injector: screen.injector">
     </ng-container>
 </ng-template>
</div>

父组件代码：

export class TabsContainerComponent implements OnInit {

  // make sure these component are also added to entryComponents
  private components = [
    GridSampleComponent,
    NotifySampleComponent,
    LoaderSampleComponent,
    TTLayoutComponent,
    ...
  ];

  screen: any; // reference to be used by the ngComponentOutlet in the template

  constructor(
    private injector: Injector,
  ) {}

  async ngOnInit() {
    const tabs = await this.someApiService.getComponentFilters().toPromise();
    const injector = Injector.create({
        providers: [any providers you want to pass to the component],
        parent: this.injector
    })

    switch (tabs.componentName) {
        case 'grid-sample':
            screen = { component: GridSampleComponent, injector };
            break;
        case 'notify-sample':
            screen = { component: NotifySampleComponent, injector };
            break;
        case 'loader-sample':
            screen = { component: LoaderSampleComponent, injector };
            break;
        case 'tt-layout':
            screen = { component: TTLayoutComponent, injector };
            break;
    }
  }
}

Answer 2

您可以简单地使用 ngSwitch 来缩短它，但动态组件名称来自我不知道的不可能，

<div class="row column-seperation" *ngSwitch="tab.componentName">
    <app-grid-sample *ngSwitchCase="'grid-sample'"></app-grid-sample>
    <app-pdf-export-sample *ngSwitchCase="'pdf-export-sample''"></app-pdf-export-sample>
     //etc ...
  </div>

Answer 3

您可以创建一个名称如下的动态组件：

选项卡项是一个指令：

@ViewChildren('tabItem', {read: ViewContainerRef} ) tabItem:  QueryList<ViewContainerRef>;

这里创建动态组件：

    const factories = Array.from(this.componentFactoryResolver['_factories'].keys());
    const factoryClass = <Type<any>>factories.find((x: any) => x.name === dynamicComponentName);
    if (factoryClass !== undefined) {
      const factory = this.componentFactoryResolver.resolveComponentFactory(factoryClass);
      const ref = this.tabItem.viewContainerRef;
      ref.createComponent(factory);
    }

您还可以查看 angular 文档：dynamic component

如何使用 angular 调用与 html 中的字符串 "component name" 相同的组件 7

How to call component with same as string "component name" in html using angular 7

html

reflection

typescript

angular-components

angular