如何在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來獲取它。

但話又說回來，看看閃電戰，親眼看看吧！

Answer 2

嘗試這個

constructor(private elementRef: ElementRef) {}

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

Answer 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';
    }

 }