基于条件的一个组件多个模板

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为true时,即使显示div块,ng-content也不会运行(导致它在上面的块中运行).

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 {
	// Default Value
	public IsCheckboxEnabled:boolean = false;
	public IsRadioboxEnabled:boolean = false;

	constructor() {		
	}

	ngOnInit() {
		
	}
}

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