当前位置:  开发笔记 > 编程语言 > 正文

如何有条件地围绕ng-content包装div

如何解决《如何有条件地围绕ng-content包装div》经验,为你挑选了1个好方法。



1> yurzui..:

Angular ^ 4

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

Plunker示例角度v4

角度<4

在这里,您可以创建将执行相同操作的专用指令:

Plunker示例

ngIf4.ts

class NgIfContext { public $implicit: any = null; }

@Directive({ selector: '[ngIf4]' })
export class NgIf4 {
  private context: NgIfContext = new NgIfContext();
  private elseTemplateRef: TemplateRef;
  private elseViewRef: EmbeddedViewRef;
  private viewRef: EmbeddedViewRef;

  constructor(private viewContainer: ViewContainerRef, private templateRef: TemplateRef) { }

  @Input()
  set ngIf4(condition: any) {
    this.context.$implicit = condition;
    this._updateView();
  }

  @Input()
  set ngIf4Else(templateRef: TemplateRef) {
    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);
      }
    }
  }
}


希望我能两次投票.花了很多时间试图弄清楚如何在*ngIf中使用ng-content
推荐阅读
我我檬檬我我186
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有