angular - 我可以在结构指令中同时做两件事吗？

Question

我想创建一个结构指令，其行为如下:

<p *myDirective="condition">This is some text</p>

如 condition是 false然后是 <p>标签是 不是 完全呈现。

如 condition是 true然后是 <p>标签呈现额外的 class属性。

所以，要么没有任何渲染，要么:

<p class="my-added-class">This is some text</p>

换句话说，有点像 *ngIf ，但有额外的行为。

我可以找到如何执行包含/排除行为的示例(实际上有这样一个示例 in the Angular docs )。我还可以找到有关如何向元素添加类的示例 using the Renderer2 API .

但是，我不知道如何组合这些技术，因为第一种方法操作 viewContainer创建嵌入 View ，而第二种方法使用渲染器来操作元素。

有没有办法做到这一点？ 我可以以某种方式创建嵌入式 View ，然后操作它创建的元素吗？或者我可以操纵模板来改变 View 的呈现方式吗？

[注: @HostBinding不适用于结构指令，所以这不是一个选项]

Answer 1

当它满足传递给它的表达式(在 setter 中)时，我会考虑在 DOM 上添加类。你可以抢ElementRef指令内的依赖项并附加一个 class它的真实性。

@Input() set myDirective(condition: boolean) {
  if (condition) {
    this.viewContainer.createEmbeddedView(this.templateRef);
    this.elementRef.nativeElement.nextElementSibling.classList.add('my-added-class'); // renderer API can be used here
    // as Alex and Yurzui suggested
    // const view = this.viewContainer.createEmbeddedView(this.templateRef); 
    // view.rootNodes[0].classList.add('some-class')
  } else if (condition) {
    this.viewContainer.clear();
  }
}