Jeden składnik Wiele szablonów opartych na warunku

Question

A oto oferta. Mam komponent bardzo dobrze napisany i używany w wielu miejscach. Teraz muszę użyć tego samego komponentu, ale chcę, aby inny szablon był renderowany na podstawie warunku.

Spróbowałem dużo.

1) Wypróbowane przy użyciu wielu dekoratorów składowych - bez powodzenia

2) próbował wielokrotnego poziom abstrakcji, gdzie właśnie skończył tworzenie więcej składników - zły pomysł

3) można dosłownie skopiować cały element, i po prostu zmienić selektor i szablon - zły pomysł

4) Obecnie Próbowałem to:

<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> 

ustawić isWizard właściwość jako true/false. Problem polega na tym, że zawartość ng działa tylko raz. Tak więc, gdy isWizard jest prawdziwe, mimo że wyświetlany jest blok div, zawartość ng nie działa (ponieważ działa w powyższym bloku).

5) Zamiast ngIf Próbowałem też ngSwitch - nie działa

Teraz jestem zdesperowany. Proszę o pomoc :)

Answer 1

W najnowszej wersji powyżej można zrobić za pomocą * ngIf = "somevar", podczas gdy można przekazać wartość "somevar" za pomocą @ input.

Przykład:

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

O ile wiem, to nie można zrobić za pomocą ng-content ale można to osiągnąć stosując templates (lub ng-templates w kątowym 4+). Więc zamiast przekazywać treści bezpośrednio do swojego urządzenia, po prostu zawinąć go w <template> tak:

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

Następnie trzeba wstrzyknąć szablon do swojego urządzenia z @ContentChild(TemplateRef) i uczynić go tyle razy, ile chcesz.

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

Jest jedna rzecz, nasz komponent wykorzystuje ngTemplateRenderer który jest prosty dyrektywa narzędzie, które sprawia, szablony przekazywane przez referencję. Oto kod tej dyrektywy:

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