Angular：如何从父级访问子级。 ViewChild、ContentChild 都不能在特定场景下工作

Question

I have parent component with the below code

<div class="parent">
  parent >>>
  <p>This my parent having child in it</p>
  <div appChildDom >
     <ng-content></ng-content>
  </div>
</div>

Child component is defined as below,

@Component({
  selector: "div[appChildDom]",
  template: "",
  styleUrls: ["./child.component.css"]
 })
export class ChildComponent implements OnInit, AfterViewInit {

    constructor() {}
    ngAfterViewInit(): void {
      console.log("init child");
    }

    ngOnInit() {}

    getContentOfChild() {
      alert('child');
     }
   }

In my parent component, im accessing the child using the ViewChild decorator and trying to call the method on the child component.

export class ParentComponent implements OnInit {
 @ViewChild(ChildComponent) vchild: ChildComponent;

 constructor() {}
 ngAfterViewInit(): void {
  // this.vchild is always undefined
  alert(this.vchild);
  //  I want to access the child component
  this.vchild.getContentOfChild();
 }
 ngOnInit() {}
}

Im able to access the ElementRef but not the childComponent instance. How to achieve this? Is this not correct way of defining the parent and child components? Refer the code here

Similar approach works in angular 11.x refer the code

Answer 1

This might help someone who has faced similar issue. As, it is standalone components. I tried to import the child component inside the parent component and it worked as expected.