Un solo modello a più componenti basato sulla condizione

Question

Quindi, ecco l'affare. Ho un componente molto ben scritto e usato in molti posti. Ora ho bisogno di usare lo stesso componente, ma voglio un modello diverso da renderizzare, basato su una condizione.

Ho provato molto.

1) provato ad utilizzare molteplici decoratori componenti - senza fortuna

2) Ho provato più livelli di astrazioni, dove ho appena finito per creare più componenti - cattiva idea

3) può letteralmente copiare l'intero componente, e basta cambiare il selettore e il modello - cattiva idea

4) Attualmente cercavo questo:

<div *ngIf="!isWizard"> 
    <ul class="nav" role="tablist"> 
     <ng-content select="tab-link"></ng-content> 
    </ul> 
    <ng-content select="tab-content"></ng-content> 
</div> 


<div *ngIf="isWizard"> 
    <nav class="nav-panel sidenav"> 
     <ng-content select=".wizard-title"></ng-content> 
      <ul class="nav" role="tablist"> 
       <ng-content select="tab-link"></ng-content> 
      </ul> 

    </nav> 

    <main class="settings-panel content-area"> 
     <ng-content select="tab-content"></ng-content> 
    </main> 

</div> 

ho impostato l'isWizard proprietà come vero/falso. Ora il problema è che il contenuto di ng viene eseguito solo una volta. Quindi, quando isWizard è true, anche se viene visualizzato il blocco div, il contenuto di ng non viene eseguito (perché è stato eseguito nel blocco precedente).

5) Invece di usare ngIf Ho anche provato ngSwitch - non ha funzionato

Sono disperata ora. Si prega di aiutare :)

Answer 1

Nella versione precedente sopra può essere fatto utilizzando * ngIf = "somevar", mentre è possibile passare il valore "somevar" utilizzando @input.

Esempio:

import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; 
 
import {SearchPipe} from './../filters/search.pipe'; 
 

 
@Component({ 
 
    selector: 'itra-filter', 
 
    templateUrl: 'filter.component.html', 
 
    styleUrls: ['filter.component.scss'], 
 
    inputs:['IsCheckboxEnabled','IsRadioboxEnabled'], 
 
    outputs: ['itemClicked'] 
 
}) 
 
export class ItraFilterComponent { 
 
\t // Default Value 
 
\t public IsCheckboxEnabled:boolean = false; 
 
\t public IsRadioboxEnabled:boolean = false; 
 

 
\t constructor() { \t \t 
 
\t } 
 

 
\t ngOnInit() { 
 
\t \t 
 
\t } 
 
}

<span class="checkbox-control" *ngIf="IsCheckboxEnabled"> 
 
     <i class="icon icon_Check-box_filled" *ngIf="y.checked"></i> 
 
\t \t \t \t <i class="icon icon_Check-box" *ngIf="!y.checked">  </i> 
 
</span> 
 
     
 
<span class="radiobox-control" *ngIf="IsRadioboxEnabled"> 
 
\t \t \t \t <i class="icon icon_Radio-button-filled" *ngIf="y.checked"></i> 
 
\t \t \t \t <i class="icon icon_Radio-button" *ngIf="!y.checked"></i> 
 
</span>

Answer 2

Per quanto ne so che non può essere fatto utilizzando ng-content ma si potrebbe raggiungere questo obiettivo utilizzando templates (o ng-templates in angolare 4+). Così, invece di passare contenuti direttamente al componente, basta avvolgerlo in <template> così:

<my-component [isWizard]="true"> 
    <template>Hello World!</template> 
</my-component> 

allora avete bisogno di iniettare il modello per il componente con @ContentChild(TemplateRef) e rendere tutte le volte che lo si desidera.

@Component({ 
    selector: "my-component", 
    template: ` 
    <div *ngIf="!isWizard"> 
     first: <template [ngTemplateRenderer]="template"></template> 
    </div> 
    <div *ngIf="isWizard"> 
     second: <template [ngTemplateRenderer]="template"></template> 
    </div>` 
}) 
export class MyComponent { 

    @ContentChild(TemplateRef) 
    private template: TemplateRef<any>; 

    @Input("isWizard") 
    private isWizard: boolean; 
} 

C'è un'ultima cosa, la nostra componente utilizza ngTemplateRenderer che è una semplice direttiva utility che rende i modelli passati per riferimento. Ecco il codice per quella direttiva:

@Directive({ selector: '[ngTemplateRenderer]'}) 
export class TemplateRenderer implements OnInit, OnDestroy { 

    @Input("ngTemplateRenderer") 
    private template: TemplateRef<any>; 

    private view: EmbeddedViewRef<any>; 

    constructor(private container: ViewContainerRef) {} 

    ngOnInit(): void { 
     this.view = this.container.createEmbeddedView(this.template); 
    } 

    ngOnDestroy(): void { 
     this.view.destroy(); 
    } 
}