如何将模块的组件延迟加载到选项卡组件中

Question

我试图开发一个标签组件，通过像这样的服务来接收标签

    @Injectable()
    export class TabOfComponentService {
      //some code
      //add a tab in array and use a subject
      addTab(tab: TabObject) {
          tab.id = this.geraId();
          this.tabs.push(tab);
          this._subjectTab.next(this.tabs);
      }
      //remove a tab in array and use a subject
      removeTab(tab: TabObject):TabObject[] {
           let list: TabObject[] = [];
           for (let t of this.tabs) {
              if (!(tab.id === t.id)) {
                 list.push(t);
              }
           }
           this.tabs=list;
           this._subjectTab.next(this.tabs);
           return list;
        }             
        disableTabs(){
            this._subjectDesabilitarAbas.next(true);
        }
        enableTabs(){
            this._subjectDesabilitarAbas.next(false);
        }
    }

对象TabObject就是那样

    export class TabObject {
      id: number;
      type: Type<Component>;
      classIcon: string;
      cmpRef: ComponentRef<Component>;
      titulo: string;
      removivel: boolean;
      desabilitado: boolean;
    }

对于构建标签的组件，我写了类似这样的内容

        @Component
            ...
            template: `
            <div class="tab">
                <div *ngFor="let item of tabs" class="tablinks" >

                        <button [ngClass]="   [((item.id===abaSelecionada?.id)?'active':'')]" (click)="abrirAba(item)" [disabled]="item.desabilitado || desabilitarAbas"  >
                                <i [ngClass]="['fa', item.classIcon]" > </i> 
                                {{item.titulo}}
                                <a *ngIf="item.removivel" (click)="removerAba(item)" title="Remover" style="padding-left:5px"  >
                                    <i class="fa fa-remove"> </i>
                                </a>
                        </button>
                </div>
            </div>

            <div *ngFor="let item of tabs" [id]="item.id" [ngClass]="['tab'+item.id]" style=" display: none;
                                                                  padding: 6px 12px;
                                                                  border: 1px solid #ccc;
                                                                  border-top: none">
                <dcl-wrapper [tabObject]="item" (onRemove)="removerAba($event)"></dcl-wrapper>

            </div>
            `
        export class TabOfComponentComponent implements OnDestroy {

          abaSelecionada: TabObject;
          tabs: TabObject[];
          desabilitarAbas: boolean;
          subscriptionTabs: Subscription;
          subscriptionDesabilitarAbas: Subscription;


          constructor(private tabOfComponentService: TabOfComponentService, private elRef: ElementRef) {
            this.tabs = [];
          }


          ngOnInit() {
            this.subscriptionTabs = this.tabOfComponentService.subjectTab.subscribe(
              (value) => {
                this.setAbas(value);
              },
              error => console.error(error),
            );
            this.subscriptionDesabilitarAbas = this.tabOfComponentService.subjectDesabilitarAbas.subscribe(
              (value) => {
                this.desabilitarAbas = value;
              }
            );
            this.abaSelecionada = null;
          }
          private setAbas(value: TabObject[]) {
            this.tabs = value;
            if (value && value.length > 0)
              this.abrirAba(this.tabs[value.length - 1]);
          }


          ngOnDestroy() {
            this.subscriptionTabs.unsubscribe();
            this.subscriptionDesabilitarAbas.unsubscribe();
          }
          abrirAba(item: TabObject) {
            let hElement: HTMLElement = this.elRef.nativeElement;
            if (this.abaSelecionada) {
              let divSelecionado: NodeListOf<Element> = hElement.getElementsByClassName("tab" + this.abaSelecionada.id);
              (divSelecionado[0]).setAttribute("style", "display:none");
            }

            this.abaSelecionada = item;

            let divs: NodeListOf<Element> = hElement.getElementsByClassName("tab" + item.id);
            (divs[0]).setAttribute("style", "display:block");
          }

如果您发现我使用的是具有选择器dcl-wrapper的组件，我会复制本主题的aswer的解决方案，并且不要破坏componentRef Angular 2 dynamic tabs with user-click chosen components

我需要插入所有组件，以便它们始终保留在屏幕上，当在标签之间切换时，它只会显示：none，所有这一切，因为如果我更改了显示的组件，我将失去状态组件因为它会被销毁

一切都按我计划的方式工作，但是有一个问题，所以我可以嵌入组件，有必要使用entryComponent在模块中声明它们，但这些组件是在延迟加载模块中。

有没有办法解决这个问题？