Как получить доступ к компоненту в директиве Angular2

Ответ 1

UPDATE

С Beta 16 нет официального способа добиться такого же поведения. Существует неофициальное обходное решение здесь: https://github.com/angular/angular/issues/8277#issuecomment-216206046

Спасибо @Eric Martinez, ваши указатели были важны для того, чтобы меня в правильном направлении!

Итак, принимая подход Эрика, мне удалось сделать следующее:

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.

Директива

@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!
  }

}

Ответ 2

Забудьте о Службе, там более простая форма этого

Вариант 1 (Не то, что вам нужно, но может быть полезно для других пользователей)

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.

Директива

@Directive({
  selector : '[layout-item]',
  properties: ['myParentConfig: my-parent-config'] // See the components for this property
})
export class MyDirective {
  constructor() {

  }

  onInit() {
    console.log(this.myParentConfig);
  }
}

Довольно просто, не так много объяснять здесь

Компонент

@Component({
  selector : 'my-component',
  properties : ['myConfig: layout-item']
})
@View({
  template : `<div [my-parent-config]="myConfig" layout-item="my config"></div>`,
  directives : [MyDirective]
})
export class MyComponent {
  constructor() {
  }
}

Я уверен, что вы это понимаете, но ради хорошего ответа я объясню, что он делает.

properties : ['myConfig: layout-item']`

Эта строка присваивает свойству layout-item внутреннее свойство myConfig.

Шаблон компонента

template : `<div [my-parent-config]="myConfig" layout-item="my config"></div>`,

Мы создаем свойство my-parent-config для директивы, и мы назначаем ему родительский конфиг.

Просто так! Итак, теперь мы можем добавить еще несколько компонентов (почти) одного и того же кода

Второй компонент

@Component({
  selector : 'my-second-component',
  properties : ['myConfig: layout-item']
})
@View({
  template : `<div [my-parent-config]="myConfig" layout-item="my config"></div>`,
  directives : [MyDirective]
})
export class MySecondComponent {
  constructor() {
  }
}  

См? Было намного проще, чем моя идея использовать сервисы (ужасная, но "работающая" идея).

Таким образом, это намного проще и чище. Здесь plnkr, чтобы вы могли проверить его.

(Это не то, что вам нужно: '()

UPDATE

Вариант 2

Что я понял из вашего обновленного вопроса, так это то, что вам нужна ссылка на компонент, поэтому то, что я придумал, очень похоже на мой оригинальный ответ

Что я сделал:

• Сначала я заставил компоненты держать ссылку на себя

<my-cmp-a #pa [ref]="pa" layout-item="my first component config"></my-cmp-a>
<my-cmp-b #pb [ref]="pb" layout-item="my first component config"></my-cmp-b>
<my-cmp-c #pc [ref]="pc" layout-item="my first component config"></my-cmp-c>

• Затем я передал каждую ссылку на директиву LayoutItem (которая была введена в каждом компоненте, а не на верхнем уровне)

@Component({
  selector : 'my-cmp-a',
  properties : ['ref: ref']
})
@View({
  template : '<div [parent-reference]="ref" layout-item=""></div>',
  directives : [LayoutItem]
})
@YourCustomAnnotation({})
export class MyCmpA {
  constructor() {

  }
}

• Наконец, в директиве вы можете получить доступ к конструктору компонента (из вашего обновленного вопроса я предполагаю, что все, что вам нужно для получения его метаданных) (Вы должны использовать его внутри onInit, "ссылка" не будет существовать в конструкторе)

@Directive({
  selector : '[layout-item]',
  properties : ['reference: parent-reference']
})
export class LayoutItem {
  constructor() {
  }

  onInit() {
    console.log(this.reference.constructor);
    Reflector.getMetadata("YourCustomAnnotation", this.reference.constructor);
  }
}

Используйте plnkr, чтобы выполнить ваши тесты.

Ответ 3

Мне удалось получить доступ к основному компоненту директивы, запросив инжектор для него.

@Directive({
  selector: '[with-foo]'
})
export class WithFooDirective implements OnInit {
  constructor(private myComponent: MyComponent) { }

  ngOnInit() {
    console.debug(this.myComponent.foo()) // > bar
  }
}

@Component({
  selector: 'my-component',
  template: '<div></div>'
})
export class MyComponent {
  public foo() { return 'bar' }
}

...

<my-component with-foo></my-component>

Ответ 4

Кажется, что наиболее удобным и чистым способом является использование псевдонима поставщика:

//ParentComponent declaration
providers: [{ provide: Parent, useExisting: forwardRef(() => ParentComponent) }]

где Parent - отдельный класс, который работает как OpaqueToken и абстрактный класс того же типа.

//directive
constructor(@Optional() @Host() parent:Parent) {}

Каждый компонент, к которому обращается дочерняя директива, должен обеспечивать себя.

Это описано в документации: ссылка

Ответ 5

Это решение было связано с комментариями одного из других ответов, но оно было скрыто в конце довольно длинного обсуждения Я добавлю его здесь.

Импортируйте ViewContainerRef и введите его в свою директиву.

import { ViewContainerRef } from '@angular/core';
...
constructor(private viewContainerRef: ViewContainerRef) {}

Затем вы можете получить доступ к следующему частному/неподдерживаемому пути свойств для извлечения экземпляра компонента, который связан с элементом, который был украшен директивой.

this.viewContainerRef._data.componentView.component