Question

我的目录结构如下：

我将父组件（app.component）的一些方法分配给它的实例变量，如下所示：

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）是通过所有组件共享的，但是当我在子compinent中调用一个访问parrent视图引用的函数时，它的定义如下：

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

如果您在构造函数或ngOnInit()中访问子组件中的状态，那么这是因为父项的ngAfterViewInit()尚未执行且属性尚未设置。

我建议你使用孩子订阅的observable，并在发出值时得到通知。如果您使用BehaviorSubject，则在父项发出属性之前或之后，子项是否订阅无关紧要。

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

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

1 个答案: