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

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 block ，ng-content 也不会运行(因为它在上面的 block 中运行)。

5) 除了使用 ngIf，我还尝试了 ngSwitch - 没有用

我现在很绝望。请帮助:)

Answer 1

据我所知，使用 ng-content 是做不到的。但你可以使用 templates 来实现(或 Angular 4+ 中的 ng-templates)。因此，与其将内容直接传递给您的组件，不如将其包装在 <template> 中像那样:

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

然后你需要使用 @ContentChild(TemplateRef) 将模板注入(inject)到你的组件中并根据需要多次渲染它。

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