武勇-ソフトウェア/ NGX-ブートストラップは、私は、ダイナミックタブを作成するために<a href="https://valor-software.com/ngx-bootstrap/#/tabs#tabs-dynamic" rel="nofollow noreferrer">valor-software/ngx-bootstrap</a>を使用しようとしているが、私は動的に作成されたタブのコンテンツ内のコンポーネントのセレクターを置きたい、では</p> <p>動的に作成されたコンテンツ

Question

内のコンポーネントを置きます

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があります。