angular - How insert components of a module lazy loaded into a tab component -

i'm trying develope tab component recieve tabs dinamically service that

    @injectable()     export class tabofcomponentservice {       //some code       //add tab in array , use subject       addtab(tab: tabobject) {           tab.id = this.geraid();           this.tabs.push(tab);           this._subjecttab.next(this.tabs);       }       //remove tab in array , use subject       removetab(tab: tabobject):tabobject[] {            let list: tabobject[] = [];            (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);         }     } 

the object tabobject that

    export class tabobject {       id: number;       type: type<component>;       classicon: string;       cmpref: componentref<component>;       titulo: string;       removivel: boolean;       desabilitado: boolean;     } 

and component build tabs wrote this

        @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");           } 

if realize i'm using component have selector dcl-wrapper, copyed solution of aswer of topic changes don't destroy componentref angular 2 dynamic tabs user-click chosen components

i needed insert components remain on screen , when switching between tabs, make display: none, because if changed presented component, lose state of component because destroyed

everything works way planned it, there problem, can embed components, necessary declare them in module using entrycomponent, these components in lazy-loading modules.

is there way out of this?