Один компонент Несколько шаблонов на основе условия

Question

Итак, вот сделка. У меня есть компонент, который очень хорошо написан и используется во многих местах. Теперь мне нужно использовать один и тот же компонент, но вам нужен другой шаблон для визуализации, основанный на условии.

Я пробовал много.

1) Пробовал не используя несколько декораторов компонентов - не повезло

2) Пробовал несколько уровень абстракций, где я только что в конечном итоге создание более компонентов - плохая идея

3) Можно буквально скопировать весь компонент, и просто изменить селектор и шаблон - плохая идея

4) в настоящее время я пытался это:

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

Я установил isWizard свойство true/false. Теперь проблема заключается в том, что ng-content запускается только один раз. Поэтому, когда isWizard является истинным, хотя отображается блок div, ng-контент не запускается (потому что он работает в вышеупомянутом блоке).

5) Вместо использования ngIf я также попытался ngSwitch - не работает

теперь я в отчаянии. Пожалуйста, помогите :)

Answer 1

В последней версии выше может быть сделано с помощью * ngIf = "somevar", в то время как вы можете передать значение "somevar" с помощью @input.

Пример:

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

Насколько я знаю, что это не может быть сделано с помощью ng-content, но вы могли бы добиться этого с помощью templates (или ng-templates в угловых 4+). Поэтому вместо передачи контента непосредственно в компоненте, просто обернуть его в <template> вроде этого:

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

Затем вам нужно впрыскивать шаблон компонента с @ContentChild(TemplateRef) и сделать его столько раз, сколько вы хотите.

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

Существует одна последняя вещь, наш компонент использует ngTemplateRenderer, который является простая утилита директива, которая делает шаблоны передаются по ссылке. Вот код для этой директивы:

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