角度版本 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”。是否可以向该指令注入一些东西来确定它在视图层次结构中的位置?
你可以注射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 演示 https://stackblitz.com/edit/angular-wd9tf1?file=src/app/highlight.directive.ts
(1)忽略应用程序的其余部分,我在谷歌上搜索了某人的“角度指令模板”并对其进行了更改以快速获取此内容
(2)当然,免责声明,“你不应该阅读_attributes
在角度上,因为它可以在未来版本中更改而无需通知,并且您将不支持这些“等等,等等。”
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)