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

【问题标题】：How to get ElementRef of structural directive in Angular如何在Angular中获取结构指令的ElementRef
【发布时间】：2019-04-16 03:05:37
【问题描述】：

我正在尝试创建一个相当基本的指令，它可以根据用户权限隐藏（从 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 注释元素，它不返回实际内容。

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

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

【问题讨论】：

如果您使用的是 Angular，那么您需要熟悉 html *ngIf 和

标签： javascript angular frontend

【解决方案1】：

我认为您将它们混合在一起。

结构指令 是用于操作 DOM 本身的指令：它可以根据条件附加或删除 DOM 的整个部分。

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

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

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

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

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

但话又说回来，看看闪电战，自己看看！

【讨论】：

这是有道理的，您链接的 stackblitz 产生的结果与我在测试时得到的结果相同。但是，您是否有一个来源（最好来自角度文档）说结构指令不能/不应该也能够修改元素以及删除或附加它？你可能是对的，答案可能只是不可能。但是我希望有一种方法（在我看来）它比使用 2 个单独的指令更优雅。
来源是代码本身：结构指令具有特定的语法，以* 开头。如果您不知道，这是一个用ng-template 替换当前标签的微语法。 The documentation 解释说，所以我不会重复它，对不起，但准确地说，它没有明确说明：只是你不能将自定义指令附加到 ng-template 标签，因为它们服务于 Angular 处理的特定目的.
@JacobRegan 并回答你的最后一点，没有什么能阻止你使用包含结构和属性指令的自定义组件！

【解决方案2】：

试试这个

constructor(private elementRef: ElementRef) {}

ngAfterViewInit() {
    this.elementRef.nativeElement.style.backgroundColor = 'yellow';
}

【讨论】：

我试过了，this.elementRef.nativeElement 只返回一个 html 注释。这适用于普通指令（例如
），但不适用于结构指令（例如
）

【解决方案3】：

有可能在你制作的时候抓住它。但是你只是像这样移动了 ngOnInit 中的操作。

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

@Directive({
   selector: '[appHighlight]' 
})
export class HighlightDirective implements OnInit{
    constructor(el: ElementRef) { }

    ngOnInit() {
       this.el.nativeElement.style.backgroundColor = 'yellow';
    }

 }

【讨论】：