Получить родительскую директиву в дочернем

У меня есть компоненты (директивы) app_form и app_input для angular2. Я могу использовать их в шаблоне по-разному:

template: `
  <app_form>
    <app_inp></app_inp>
  </app_form>
`

и независимо:

template: '<app_inp></app_inp>'

В первом случае директива app_inp добавляется вызовом функции из родителя, а во втором все работает как обычно в angular2. Кто-нибудь знает, как это сделать? Спасибо.

УПД:

export class InputComponent {  
  constructor() {}
  ngAfterViewInit() { // maybe ngAfterViewInit isn't the best way
    if(!isHasParentForm){    // if we have parent directive app_form  
      // we run some logic for adding our component
    } else {
      // if we don't have parent like app_form we run different logic
    }
  }
}

typescript angular angular2-directives
person dellink    schedule 17.06.2016    source источник
comment
Пожалуйста, добавьте больше информации о том, чего вы пытаетесь достичь. Не могли бы вы объяснить немного подробнее, что это значит? В первом случае директива app_inp добавляется вызовом функции из родителя, а во втором все работает как обычно в angular2.   -  person Günter Zöchbauer    schedule 17.06.2016
comment
Было бы полезно добавить еще немного кода, показывающего, чего вы пытаетесь достичь.   -  person Günter Zöchbauer    schedule 17.06.2016
comment
Я добавил немного кода. надеюсь теперь более понятно   -  person dellink    schedule 17.06.2016

Ответы (1)


arrow_upward
9
arrow_downward

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

@Component({
  selector: 'form-cmp',
  providers: [],
  template: `
  <div>form</div>
  <ng-content></ng-content>
  `,
  directives: []
})
export class FormComponent {}

@Component({
  selector: 'my-inp',
  providers: [],
  template: `
  <div>myInp</div>
  `,
  directives: []
})
export class MyInput {
    constructor(private form:FormComponent) {
      console.log(form);
    }
}

@Component({
  selector: 'my-app',
  providers: [],
  template: `
  <form-cmp>
    <my-inp></my-inp>
  </form-cmp>
  `,
  directives: [FormComponent, MyInput]
})
export class App {}

Пример планкера

person Günter Zöchbauer    schedule 17.06.2016
comment
но мы не можем использовать my-inp независимо ссылка - person dellink; 17.06.2016
comment
Конечно, можно :) Просто добавьте @Optional() plnkr.co/edit/elerguYGQjtFa7LBoOYx?p=preview - person Günter Zöchbauer; 17.06.2016
comment
angular.io/docs/ts/latest/api/ ядро/индекс/ - person Günter Zöchbauer; 12.01.2017