所以这是交易.我有一个很好的写作和很多地方使用的组件.现在我需要使用相同的组件,但是要根据条件来渲染不同的模板.
我试了很多
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内容只运行一次.所以当isWizard是true时,即使显示了div块,ng-content也不会运行(因为它在上面的块中运行).
5)而不是使用ngIf我也尝试过ngSwitch – 没有工作
我现在绝望了请帮忙 ：)
据我所知,不能使用ng内容,但是您可以使用模板(或Angular 4中的ng模板)来实现此目的.所以,而不是将内容直接传递给您的组件,只需将其包装到< 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();
}
}
