용맹 - 소프트웨어/NGX-부트 스트랩은에서 동적으로 생성 된 컨텐츠

Question

내가 동적 탭을 만들 수 valor-software/ngx-bootstrap를 사용하려고 해요하지만 난 동적으로 생성 탭의 컨텐츠 내부 구성 요소의 선택을 데려 가고 싶다는 내부

를 구성 요소를 넣어

import { Component, ChangeDetectionStrategy } from '@angular/core'; 

@Component({ 
    selector: 'demo-tabs-dynamic', 
    changeDetection: ChangeDetectionStrategy.OnPush, 
    templateUrl: './dynamic.html' 
}) 
export class DemoTabsDynamicComponent { 
    tabs: any[] = [ 
    { title: 'Dynamic Title 1', content: 'Dynamic content 1' }, 
    { title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: 
true }, 
    { title: 'Dynamic Title 3', content: 'Dynamic content 3', 
removable: true } 
    ]; 

    addNewTab(): void { 
    const newTabIndex = this.tabs.length + 1; 
    this.tabs.push({ 
     title: `Dynamic Title ${newTabIndex}`, 
     content: `Dynamic content ${newTabIndex}`, 
     disabled: false, 
     removable: true 
    }); 
    } 

} 

그리고 나는 이런 식으로 뭔가를 할 수 있도록하려면 : 문서의 예를 들어 우리가

import { Component, ChangeDetectionStrategy } from '@angular/core'; 

@Component({ 
    selector: 'demo-tabs-dynamic', 
    changeDetection: ChangeDetectionStrategy.OnPush, 
    templateUrl: './dynamic.html' 
}) 
export class DemoTabsDynamicComponent { 
    tabs: any[] = [ 
    { title: 'Dynamic Title 1', content: 'Dynamic content 1' }, 
    { title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: 
true }, 
    { title: 'Dynamic Title 3', content: 'Dynamic content 3', 
removable: true } 
    ]; 

    addNewTab(): void { 
    const newTabIndex = this.tabs.length + 1; 
    this.tabs.push({ 
     title: `Dynamic Title ${newTabIndex}`, 
     content: `<my-component></my-component>`, // Here is the change 
     disabled: false, 
     removable: true 
    }); 
    } 
} 

각도 구성 요소를 소독하라고 selector to string 해결 방법이 있습니까?

Answer 1

는 사실은 내가

<tabset > 
    <tab *ngFor="let tabz of mainMenuTab.tabs" 
     [heading]="tabz.title" 
     [active]="tabz.active" 
     (select)="tabz.active = true" 
     (deselect)="tabz.active = false" 
     [disabled]="tabz.disabled" 
     [removable]="tabz.removable" 
     (removed)="removeTabHandler(tabz)" 
     [customClass]="tabz.customClass"> 
     <div [ngSwitch]="tabz?.content"> 
     <app-employees-menu *ngSwitchCase="'employee'"></app-employees- 
    menu> 
    <app-inventories-menu *ngSwitchCase="'inventory'"></app- 
    inventories-menu> 
     <app-customers-menu *ngSwitchCase="'customer'"></app-customers- 
    menu> 
    </div> 
    </tab> 
    </tabset> 

그래서 기본적으로 나는 이미 내가 가지고 내가해야 할 일을 기준으로 할 수있는 모든 가능한 탭을 넣어 내용의 경로에 모든 HTML이 필요하지 않습니다이 방법을했다 스위치로 작동하는 내용을 전달하고 템플릿에는 switchCase와 일치하는 탭을 표시하는 switchCase가 있습니다.