Question

嘿我现在正在逐步学习角度2我已经构建了一个结构自定义指令，除非调用。除非行为与ngIf行为相同，否则如果我的条件为真，则将元素附加到dom，否则将其分离。这是我操作指令的模板：

<h1>Structural Custom Directive</h1>
<h2>*unless</h2>
<div id="container">
  <div *unless="switch" id="conditional-text">Conditional Text</div>
</div>
<button (click)="onSwitch()">Switch</button>

我的主要组件中有一个叫做开关的字段，每按一次按钮，我都会遍历这个开关的值：

  onSwitch(){
    this.switch = !this.switch;
  }

现在指令的代码是这样的：

import { Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';

@Directive({
  selector: '[unless]'
})
export class UnlessDirective {
  @Input() set unless(condition: Boolean){
    if (condition){
      this.vcRef.createEmbeddedView(this.templateRef);
    }else{
      this.vcRef.clear();
    }
   console.log('this.vcRef', this.vcRef);
   console.log('this.templateRef', this.templateRef);
  }
  constructor(private templateRef: TemplateRef<any>,private vcRef: ViewContainerRef) { }

}

对于condition = true我将templateref添加到我的embeddedView，否则我清除了viewContainerRef。现在我的问题是基本的，viewContainerRef是什么，是否指向带容器ID的div？或者这可能是文档对象。我无法弄清楚viewContainerRef引用的位置。

我知道像ngIf这样的每个结构指令都是以下几个：

<template [ngIf]=”condition”>
<p>My Content</p>
</template>

因此我知道templateRef是指上面的模板元素，但我无法理解viewContainerRef指向的位置？

我试图打印viewContainerRef，我得到的是一条评论，我不知道它来自哪里。

Answer 1

将ViewContainerRef视为DOM中的锚点，您可以通过编程方式插入/删除模板和组件。

在您的情况下，该锚点的位置确实是<div *unless>所在的点。但是不要将它视为DOM节点或标记。这是一个Angular概念，因此它没有真正的等价物。

实际上它只是一个容器，其内容可以通过编程方式控制。

https://angular.io/docs/ts/latest/api/core/index/ViewContainerRef-class.html

ViewContainerRef服务及其引用的元素？（Angular 2）

1 个答案: