如何在Angular中获取结构指令的ElementRef

Question

我正在尝试创建一个相当基本的指令，它可以根据用户权限隐藏（从 DOM 中删除）、显示或显示和禁用其中的内容。

根据角度指南，我应该能够做类似的事情来修改指令中的内容。

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

但是，我在访问指令的内部内容时遇到问题。这需要是一个结构指令，以便能够从 DOM 中删除内容，但是当我将其设为结构指令时，ElementRef 仅返回包含 ng 绑定的 HTML 注释元素，它不会返回实际内容。

当我将此作为非结构指令进行测试时，它返回实际内容。

如何访问结构指令的内部内容？

Answer 1

我想你把它们混在一起了。

甲结构指令是由操作DOM本身指令：它可以追加或删除基于条件的DOM的一整体部分。

一个属性指令是由改变DOM的元件的指令。它可以改变它的样式，但它不能从 DOM 中删除它（但可以用 CSS 隐藏它）。

他们有一个专门的目的，不能（好吧，不应该）尝试做对方应该做的事情。由于它们的用途，它们也有不同的语法。

如果您查看此 stackblitz，您将看到两者之间的区别：一个可以显示元素引用（属性），另一个仅显示 HTML 注释（结构）。

结构指令在 HTML 中的保留空间中使用，并且只知道该空间。

如果您希望获得具有结构指令的元素的元素引用，则需要使用nextElementSibling注释的 来获得它。

但话又说回来，看看闪电战，亲眼看看吧！