angular - Hae vanhemman direktiivi lapsessa


Minulla on app_form- ja app_input-komponentit (direktiivit) Angular2:lle. Voin käyttää niitä mallissa eri tavoin:

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

ja itsenäisesti:

template: '<app_inp></app_inp>'

Ensimmäisessä tapauksessa direktiivi app_inp lisätään kutsumalla funktiota vanhemmasta, ja toisessa kaikkee toimii tavallisesti Angular2:ssa. Tietääkö kukaan, miten se tehdään? Kiitos.

PÄIVITYS :

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

Vastaus #1

Jos vanhemman tyyppi on tiedossa staattisesti, voit vain injektoida sen

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

Plunker-esimerkki

Aiheeseen liittyviä artikkeleita