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隐藏它）。

他们有一个专门的目标，不能（嗯，不应该）尝试做别人应该做的事情。由于目的，它们还具有不同的语法。

如果您查看this 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';
    }

 }

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

3 个答案: