如何有条件地将 div 包裹在 ng-content 周围 [英] How to conditionally wrap a div around ng-content

问题描述

根据(布尔)类变量的值，我希望我的 ng-content 要么被包裹在 div 中，要么不被包裹在 div 中(即 div 甚至不应该被包裹在 DOM 中)......什么是最好的方法呢?我有一个 Plunker 试图做到这一点，我认为这是最明显的方式，使用 ngIf .. 但它不起作用......它只显示布尔值之一的内容，而不显示另一个

请帮忙谢谢！

http://plnkr.co/edit/omqLK0mKUIzqkkR3lQh8

@Component({选择器:'我的组件'，模板:`<div *ngIf="insideRedDiv" style="display: inline; border: 1px red solid"><ng-content *ngIf="insideRedDiv" ></ng-content>

<ng-content *ngIf="!insideRedDiv"></ng-content>`，})导出类 MyComponent {insideRedDiv: boolean = true;}@成分({模板:`<我的组件>...这是内容"...</my-component>`})导出类 App {}

解决方案

Angular ^4

作为解决方法，我可以为您提供以下解决方案:

<div *ngIf="insideRedDiv;elseelseTpl"样式=显示:内联；边框:1px 红色实线><ng-container *ngTemplateOutlet=elseTpl"></ng-container>

<ng-template #elseTpl><ng-content></ng-content></ng-模板>

Plunker 示例 angular v4

角<4

在这里你可以创建专门的指令来做同样的事情:

<div *ngIf="insideRedDiv;elseelseTpl"样式=显示:内联；边框:1px 红色实线><ng-container *ngTemplateOutlet=elseTpl"></ng-container>

<模板#elseTpl><ng-content></ng-content></template>

Plunker 示例

ngIf4.ts

class NgIfContext { public $implicit: any = null;}@Directive({ 选择器: '[ngIf4]' })导出类 NgIf4 {私有上下文:NgIfContext = new NgIfContext();私有 elseTemplateRef: TemplateRef;私有 elseViewRef: EmbeddedViewRef;私有视图引用:EmbeddedViewRef;构造函数(私有视图容器:ViewContainerRef，私有模板引用:TemplateRef<NgIfContext>){}@输入()设置 ngIf4(条件:任何){this.context.$implicit = 条件；this._updateView();}@输入()设置 ngIf4Else(templateRef: TemplateRef) {this.elseTemplateRef = templateRef;this.elseViewRef = null;this._updateView();}私人 _updateView() {如果(this.context.$implicit){this.viewContainer.clear();this.elseViewRef = null;如果(this.templateRef){this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef, this.context);}} 别的 {如果(this.elseViewRef)返回；this.viewContainer.clear();this.viewRef = null;如果(this.elseTemplateRef){this.elseViewRef = this.viewContainer.createEmbeddedView(this.elseTemplateRef, this.context);}}}}

depending on the value of a (boolean) class variable I would like my ng-content to either be wrapped in a div or to not be wrapped in div (I.e. the div should not even be in the DOM) ... Whats the best way to go about this ? I have a Plunker that tries to do this, in what I assumed was the most obvious way, using ngIf .. but it's not working... It displays content only for one of the boolean values but not the other

kindly assist Thank you!

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

解决方案

Angular ^4

As workaround i can offer you the following solution:

<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

Angular < 4

Here you can create dedicated directive that will do the same things:

<div *ngIf="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);
      }
    }
  }
}

这篇关于如何有条件地将 div 包裹在 ng-content 周围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！