取决于(布尔)类变量的值,我希望我的ng-content
包含在div中或不包含在div中(即div甚至不应该在DOM中)。 ..最好的办法是什么?我有一个Plunker试图这样做,我认为这是最明显的方式,使用ngIf ..但它不起作用...它只显示其中一个布尔值但不显示另一个< / p>
亲切的帮助
谢谢!
http://plnkr.co/edit/omqLK0mKUIzqkkR3lQh8
@Component({
selector: 'my-component',
template: `
<div *ngIf="insideRedDiv" style="display: inline; border: 1px red solid">
<ng-content *ngIf="insideRedDiv" ></ng-content>
</div>
<ng-content *ngIf="!insideRedDiv"></ng-content>
`,
})
export class MyComponent {
insideRedDiv: boolean = true;
}
@Component({
template: `
<my-component> ... "Here is the Content" ... </my-component>
`
})
export class App {}
答案 0 :(得分:53)
作为解决方法,我可以为您提供以下解决方案:
<div *ngIf="insideRedDiv; else elseTpl" style="display: inline; border: 1px red solid">
<ng-container *ngTemplateOutlet="elseTpl"></ng-container>
</div>
<ng-template #elseTpl><ng-content></ng-content> </ng-template>
<强> Plunker Example angular v4 强>
在这里,您可以创建执行相同操作的专用指令:
<div *ngIf4="insideRedDiv; else elseTpl" style="display: inline; border: 1px red solid">
<ng-container *ngTemplateOutlet="elseTpl"></ng-container>
</div>
<template #elseTpl><ng-content></ng-content></template>
<强> Plunker Example 强>
<强> ngIf4.ts 强>
class NgIfContext { public $implicit: any = null; }
@Directive({ selector: '[ngIf4]' })
export class NgIf4 {
private context: NgIfContext = new NgIfContext();
private elseTemplateRef: TemplateRef<NgIfContext>;
private elseViewRef: EmbeddedViewRef<NgIfContext>;
private viewRef: EmbeddedViewRef<NgIfContext>;
constructor(private viewContainer: ViewContainerRef, private templateRef: TemplateRef<NgIfContext>) { }
@Input()
set ngIf4(condition: any) {
this.context.$implicit = condition;
this._updateView();
}
@Input()
set ngIf4Else(templateRef: TemplateRef<NgIfContext>) {
this.elseTemplateRef = templateRef;
this.elseViewRef = null;
this._updateView();
}
private _updateView() {
if (this.context.$implicit) {
this.viewContainer.clear();
this.elseViewRef = null;
if (this.templateRef) {
this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef, this.context);
}
} else {
if (this.elseViewRef) return;
this.viewContainer.clear();
this.viewRef = null;
if (this.elseTemplateRef) {
this.elseViewRef = this.viewContainer.createEmbeddedView(this.elseTemplateRef, this.context);
}
}
}
}
答案 1 :(得分:3)
请记住,您可以将所有这些逻辑放在单独的组件中! (根据yurzui回答):
import { Component, Input } from '@angular/core';
@Component({
selector: 'div-wrapper',
template: `
<div *ngIf="wrap; else unwrapped">
<ng-content *ngTemplateOutlet="unwrapped">
</ng-content>
</div>
<ng-template #unwrapped>
<ng-content>
</ng-content>
</ng-template>
`,
})
export class ConditionalDivComponent {
@Input()
public wrap = false;
}
然后您可以像这样使用它:
<div-wrapper [wrap]="'true'">
Hello world!
</div-wrapper>
答案 2 :(得分:2)
我检查了这一点,发现了一个关于标签多次转换主题的公开问题。这可以防止您在单个模板文件中定义多个标记。
这解释了为什么只有在您的plunker示例中删除了其他标记时才能正确显示内容。
您可以在此处查看未解决的问题: https://github.com/angular/angular/issues/7795