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

问题描述

我正在使用Angular 2进行一些测试，并且有一个指令(布局项目)可以应用于我的所有组件.

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. 
    }
}

推荐答案

更新:

自Beta 16开始，没有正式的方法来获得相同的行为.这里有一个非正式的解决方法: https://github.com/angular/angular/issue/8277#issuecomment-216206046

Since Beta 16 there is no official way to get the same behavior. There is an unofficial workaround here: https://github.com/angular/angular/issues/8277#issuecomment-216206046

感谢@埃里克·马丁内斯(Eric Martinez)，您的指导对使我朝正确的方向至关重要！

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

因此，按照埃里克(Eric)的方法，我设法做到了以下几点:

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>

三个不同的组件，所有组件共享相同的layout-item属性.

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

指令

@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屋！