时间戳

首页 > 解决方案 > 如何从指令中获取角度视图层次结构？

angular - 如何从指令中获取角度视图层次结构？

问题描述

角度版本 6+

我正在研究一个可以放置在任何元素上的指令，用于一般使用记录。对于上下文，它看起来类似于以下内容：

@Directive({
  selector: '[log]'
})
export class LogDirective {
  @Input() log: string; // the log message
  @Input() logOn: string; // event name to trigger logging

  constructor(private renderer: Renderer2,
              private elementRef: ElementRef) {
  }

  ngOnInit() {
    this.renderer.listen(this.elementRef.nativeElement, this.logOn, () => {
      // log the message, etc.
    }
  }
}

<div log="Clicked the element" logOn="click">Click Me</div>

这很好用，但我认为自动获取某种类型的父层次结构以便可以记录它会很酷。这样，有人可以查看日志并很容易地看到它是从哪里记录的。类似于“AppComponent -> SomeOtherComponent -> ParentCompnent”。有什么东西可以注入到这个指令中来确定它在视图层次结构中的位置吗？

标签： angulartypescript

解决方案

您可以注入ViewContainerRef指令以访问托管组件。然后，您可以使用它来读取当前组件和该组件的父组件。

递归地这样做会给你你想要的结果。

像这样的东西（我会把递归算法留给你）：

constructor(private viewContainerRef: ViewContainerRef) { }

private clicked() {
    console.log(this.viewContainerRef['_view'].component);
    console.log(this.viewContainerRef['_view'].parent.component);
    console.log(this.viewContainerRef['_view'].parent.parent.component);
  }

(1) Stackblitz 演示

（1）忽略应用程序的其余部分，我在谷歌上搜索了某人的“角度指令模板”并对其进行了更改以快速获得

（2）当然，免责声明，“你不应该阅读_attributes角度，因为它可以在未来版本中未经通知而更改，并且你将不支持这些”等等等等。

推荐阅读