web-dev-qa-db-ja.com

ng-contentの周りにdivを条件付きでラップする方法

（ブール型）クラス変数の値に応じて、ng-content divにラップされるか、divにラップされない（つまり、divがDOMにあるべきではありません）...これを実行する最善の方法は何ですか？私は Plunker を持っています。これはngIf ..を使用して最も明白な方法であると仮定したものですが、機能していません...ブール値の1つだけのコンテンツを表示しますが他の

ありがとうございました！

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 {}
angularangular-ng-ifangular2-ngcontent
32
Somo S.

角度^ 4

回避策として、次のソリューションを提供できます。

<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の例angular v4

角度<4

ここでは、同じことを行う専用のディレクティブを作成できます。

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

プランカーの例

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);
      }
    }
  }
}
57
yurzui

このすべてのロジックを個別のコンポーネントに配置できることを忘れないでください！ （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>
3
charlie_pl

私はこれをチェックし、タグを使用した複数のトランスクルージョンに関する未解決の問題を発見しました。これにより、単一のテンプレートファイルに複数のタグを定義できなくなります。

これは、プランカーの例で他のタグが削除された場合にのみコンテンツが正しく表示される理由を説明しています。

ここで未解決の問題を確認できます： https://github.com/angular/angular/issues/7795

2
Jolmari