无法使用@ViewChild Angular 7将数据从子级传递到父级

Question

Hi I can't pass my data from child to parent using @ViewChild

I have this code from

admin-layout.component.ts

@ViewChild(TribeComponent)
 getRoute :TribeComponent; 

ngAfterViewInit() {
  console.log( this.getRoute);
  this.message = this.getRoute.messagetwo;
  console.log('Values on ngAfterViewInit():');
  console.log("primaryColorSample:", this.message);
}  

and code from

tribecomponent.ts

messagetwo:string = "true";

the error is

TypeError: Cannot read property 'messagetwo' of undefined
at AdminLayoutComponent.push../src/app/layouts/admin-layout/admin-layout.component.ts.AdminLayoutComponent.ngAfterViewInit (admin-layout.component.ts:45)
at callProviderLifecycles (core.js:22416)
at callElementProvidersLifecycles (core.js:22390)
at callLifecycleHooksChildrenFirst (core.js:22380)
at checkAndUpdateView (core.js:23316)
at callViewAction (core.js:23548)
at execEmbeddedViewsAction (core.js:23511)
at checkAndUpdateView (core.js:23308)
at callViewAction (core.js:23548)
at execComponentViewsAction (core.js:23490)

the first console was undefined console.log( this.getRoute);

the second one was the error above console.log("primaryColorSample:", this.message);

btw admin-layout is kind of my app component html so I use router outlet to navigate to tribe component. Is it the reason why it can't see tribe as its child? here's a sample how my layout work Creative Tim's Argon Dashboard Angular

Answer 1

To send data from child to parent use events (not ViewChild) - eg in child:

@Output() public myevent = new EventEmitter<any>();

...
fireEvent() {
  this.myevent.emit({'some':'data'});
}

and in parent template

<child-component (myevent)="handleEvent($event)">...</child-component>

where handleEvent(data) is your pratent function which will get emited data from child