Как получить доступ к компоненту host из директивы?

скажем, у меня есть следующие разметки:

<my-comp myDirective></my-comp>

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

более конкретно, я хочу иметь доступ к свойствам и методам MyComponent С MyDirective в идеале ничего не добавляя в HTML выше.

10
angular angular-directive

4 ответов

вы можете просто ввести его

class MyDirective {
  constructor(private host:MyComponent) {}

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

Смотрите также https://github.com/angular/angular/issues/8277
Она также предоставляет некоторые обходные пути, когда вы не знаете тип заранее.

9

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

import { Host, Self, Optional } from '@angular/core';

    constructor(
         @Host() @Self() @Optional() public hostCheckboxComponent : MdlCheckboxComponent
        ,@Host() @Self() @Optional() public hostSliderComponent   : MdlSliderComponent){
                if(this.hostCheckboxComponent) {
                       console.log("host is a checkbox");
                } else if(this.hostSliderComponent) {
                       console.log("host is a slider");
                }
         }

кредит: https://github.com/angular/angular/issues/8277#issuecomment-323678013

3

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

ввести ViewContainerRef в конструктор 

constructor(private _viewContainerRef: ViewContainerRef) { }

а затем получить его с помощью 

let hostComponent = this._viewContainerRef["_data"].componentView.component;
2
constructor(private vcRef: ViewContainerRef){
        let parentComponent=(<any>this.vcRef)._view.context;
}
0