如何从angular2的子组件访问父组件的视图引用

Question

I have directory structure as follows:

I assigned some method of parent component(app.component) to instance variable of it as follows:

export class AppComponent implements AfterViewInit, AfterContentInit{
  @ViewChild('contentLoginModl') contentLoginModlCon: ElementRef;
  @ViewChild('modlSignToApplyTg') modlSignToApplyTg: ElementRef;
  @ViewChild('uploadCV') uploadCV: ElementRef;
  .....
  constructor(){ .... }
  .....
  ngAfterViewInit() {
    this.appState.set('opnLgnAppTmp',this.contentLoginModlCon);
    this.appState.set('opnUpldCvAppTmp',this.uploadCV);
    this.appState.set('opnLgnBfrAppTmp',this.modlSignToApplyTg);
  }

appState (service) is shared through all components but when i'm calling a function inside child compinent which access the refrence of parrent view it comes undefined as follows:

TypeError: Cannot read property 'open' of undefined
    at AppState._state.open (http://localhost:5003/static/main.prod.bundle.js:6:3788)
    at AppComponent.opnWithTry (http://localhost:5003/static/main.prod.bundle.js:2:17395)
    at AppComponent.opnLgnBfrApp (http://localhost:5003/static/main.prod.bundle.js:2:2714)
    at EditProfile.starItm (http://localhost:5003/static/main.prod.bundle.js:7:14899)
    at View_EditProfile26.handleEvent_24 (/AppModule/EditProfile/component.ngfactory.js:2700:51)
    at HTMLAnchorElement.<anonymous> (http://localhost:5003/static/vendor.prod.bundle.js:27:22958)
    at ZoneDelegate.invokeTask (http://localhost:5003/static/polyfills.prod.bundle.js:4:12265)
    at Object.onInvokeTask (http://localhost:5003/static/vendor.prod.bundle.js:26:14260)
    at ZoneDelegate.invokeTask (http://localhost:5003/static/polyfills.prod.bundle.js:4:12170)
    at Zone.runTask (http://localhost:5003/static/polyfills.prod.bundle.js:4:8197)

Answer 1

If you access the state in the child component in the constructor or ngOnInit() then this is because ngAfterViewInit() of the parent wasn't yet executed and the properties are not yet set.

I'd suggest you use observables the child subscribes to and gets notified when values are emitted. If you use BehaviorSubject it doesn't matter if the child subscribes before or after the parent emits the properties.

See also https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service