Question

我有一个属性指令，我将应用于DOM中的元素。我想知道是否有可能以某种方式获取DOM中属性指令的组件名称。

例如，给定：

<SomeComponent>
    <div myAttributeDirective>
</SomeComponent>

我想从属性指令代码中获取名称SomeComponent。

我知道我可以将任何内容传递给指令，但我试图尽可能简洁，并且希望有一种创造性的方法来实现这一点。

Answer 1

不，这在组件标签中是不可能的。您必须通过TS文件中定义的属性传递组件名称。

本文是关于类似主题的，但即使在这里，您也必须在TS文件中准备一个变量，然后将其作为属性传递。

Accessing `selector` from within an Angular 2 component

Answer 2

我最终确定了一种方法来做到这一点，尽管它对于Angular的未来版本可能会很脆弱。诀窍是从指令中的ViewContainerRef访问组件实例，然后使用组件constructor()的强大功能获取名称。

import { Directive, HostListener, ViewContainerRef } from '@angular/core';
@Directive({
    selector: '[yourDirective]'
})
export class yourDirective {
    constructor(private _view: ViewContainerRef) {}
    ngOnInit {
        let component = (<any> this._view)._view.component;
        console.info("Component Name: ", component.constructor.name);
    }
}

Answer 3

打字稿文件core.d.ts文件未导出本地_view对象，并且在访问_view时，在整理或代码完成时遇到错误。您可以这样欺骗：

const context = this.viewContainerRef['_view'].component.constructor.name;

但是它可以在更新后更改，因为它不是ViewContainerRef的导出部分

如何在属性指令的逻辑中获取组件名称？

3 个答案: