如何访问一个Angular2指令组件 [英] How to access the Component on a Angular2 Directive

问题描述

我做了一些测试，角2，我有一个指令（布局项），可以应用到我的所有组件。

在该指令我希望能够读取组件上定义的一些元数据，但我需要访问组件的参考。

我曾尝试以下方法，但我无法得到我所需要的。没有任何一个有一个建议吗？

  @Component（{...}）
@视图（{...}）
@MyAnnotation（{...}）
出口类MyComponentA {...}
//某处在模板
＆LT; myComponentA布局项目=我的配置1＆GT;＆LT; / myComponentA＆GT;
＆LT; myComponentB布局项目=我的配置2＆GT;＆LT; / myComponentA＆GT;// ----------------------@ ng.Directive（{
    选择：[布局项]，
    属性：[
        strOptions：布局项目
    ]
    主持人：{    }
}）出口类LayoutItem {    //什么工程
    构造函数（@optional（）@Ancestor（{自：真正}）私有组件：MyComponent1）{ //像这样定义构造函数中，组件与myComponent1实例定义。
Reflector.getMetadata（MyAnnotation，component.constructor）; //＆GT;元数据就在这里！
    }//我需要的
    构造函数（@optional（）@Ancestor（{自：真正}）私有组件：任意）{ //这会崩溃的应用程序。如果不是任何我指定的一些其他类型的应用程序将不会崩溃，但部分将是空。
 //这个指令可以应用于任何组件，因此指定一个类型不是一个解决方案。
    }
}
 

解决方案

感谢@Eric马丁内斯，你的指针均让我在正确的方向至关重要！

所以，采取埃里克的做法，我已成功地做到以下几点：

HTML

 ＆LT;我的组件布局项目=我的第一个组件配置＆GT;＆LT; /我-成分＆gt;＆LT;我-第二组件布局项目=我的第二个组成部分的配置＆GT;＆LT; /我 - 第二成分＆gt;＆LT;我的三分组件布局项目=我的第三个组成部分的配置＆GT;＆LT; /我 - 第三成分＆gt;
 

三种不同的组件，所有的份额相同布局项目属性。

指令

  @Directive（{
  选择：[布局项]
}）
出口类MyDirective {
  构造函数（私人_Element：ElementRef，私人_viewManager：AppViewManager）{
    让hostComponent = this._viewManager.getComponent（this._element）;
    //对hostComponent我们有我们的组件！ （我的分量，我-第二部分，我的三分组分，...等等！
  }}
 

I'm doing some tests with Angular 2 and I have a directive (layout-item) that can be applied to all my components.

Inside that directive I want to be able to read some metadata defined on the component but for that I need to access the component's reference.

I have tried the following approach but I was unable to get what I need. Does any one has a suggestion?

@Component({...})
@View({...})
@MyAnnotation({...})
export class MyComponentA {...}


// Somewhere in a template
<myComponentA layout-item="my config 1"></myComponentA>
<myComponentB layout-item="my config 2"></myComponentA>

// ----------------------

@ng.Directive({
    selector: "[layout-item]",
    properties: [
        "strOptions: layout-item"
    ],
    host: {

    }
})

export class LayoutItem {

    // What works
    constructor(@Optional() @Ancestor({self: true}) private component: MyComponent1) {

 // with the constructor defined like this, component is defined with myComponent1 instance.
Reflector.getMetadata("MyAnnotation", component.constructor); // > metadata is here!
    }

// What I needed
    constructor(@Optional() @Ancestor({self: true}) private component: any) {

 // This will crash the app. If instead of any I specify some other type, the app will not crash but component will be null.
 // This directive can be applied to any component, so specifying a type is not a solution. 
    }
}

解决方案

Thanks @Eric Martinez, your pointers were crucial in getting me in the right direction!

So, taking Eric's approach, I have managed to do the following:

HTML

<my-component layout-item="my first component config"></my-component>

<my-second-component layout-item="my second component config"></my-second-component>

<my-third-component layout-item="my third component config"></my-third-component>

Three different components, all of the share the same layout-item attribute.

Directive

@Directive({
  selector : '[layout-item]'
})
export class MyDirective {
  constructor(private _element: ElementRef, private _viewManager: AppViewManager) {
    let hostComponent = this._viewManager.getComponent(this._element);
    // on hostComponent we have our component! (my-component, my-second-component, my-third-component, ... and so on!
  }

}

这篇关于如何访问一个Angular2指令组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！