在将组件的一个函数调用到其他函数时，给出未定义的错误@viewChild AfterViewInit

Question

我正在尝试调用showProfileImage（）函数，该函数是我在editprofile组件中的leftSidebar组件之一，用于更新图像，因为我使用@viewchild和AfterViewInit进行了更新，但它给出了错误ERROR TypeError：“ this.showPI is undefined” / p>

我想在此组件中从LeftbarComponent showProfileImage函数调用函数。

EditprofileComponent.ts

export class EditprofileComponent implements OnInit, AfterViewInit {
  @ViewChild(LeftbarComponent)
  private showPI: LeftbarComponent;
  constructor(private authenticationService: AuthenticationService,
              private studentService: StudentService,
              private urlConfig: AppConfig) {

    this.currentUser = this.authenticationService.currentUserValue;
    this.getStudent(this.currentUser.id);
  }
  url = this.urlConfig.apiUrl1 ;
  interUrl = this.urlConfig.interUrl1 ;

  onFileSelected(event) {

  }
  ngOnInit() {

  }
  ngAfterViewInit() {
     this.showPI.showProfileImage();
  }
  getStudent(id: number)  {
    this.studentService.getAdminInfo(id)
                      .subscribe(
                        (data) => {
                        this.initForm(data[0]);
                        }
                      );
  }

  onSubmit(studentData: any) {
  }
}

LeftbarComponent.ts

export class LeftbarComponent implements OnInit {

  currentUser: User;
  profileImage: any;
  constructor(private authenticationService: AuthenticationService,
              private dashboarService: DashboardService,
              private urlConfig: AppConfig) {
    this.currentUser = this.authenticationService.currentUserValue;
   }
   url = this.urlConfig.apiUrl1 ;
   interUrl = this.urlConfig.interUrl1 ;
   showProfileImage(): void {
    this.dashboarService.getProfileImage(this.currentUser.id)
    .subscribe(
      (data) => {
        this.profileImage = data.image;
  });
   }
  ngOnInit() {
    this.showProfileImage();
    (function () {
      // Toggle Sidebar
      const treeviewMenu: any = $('.app-menu');
    $('[data-toggle="sidebar"]').unbind('click');
    $('[data-toggle="sidebar"]').click(function(event) {
      event.preventDefault();
      $('.app').toggleClass('sidenav-toggled');
    });
    // Activate sidebar treeview toggle
    $('[data-toggle="treeview"]').unbind('click');
    $('[data-toggle="treeview"]').click(function(event) {
      event.preventDefault();
      if (!$(this).parent().hasClass('is-expanded')) {
        treeviewMenu.find('[data-toggle="treeview"]').parent().removeClass('is-expanded');
      }
      $(this).parent().toggleClass('is-expanded');
    });
    // Set initial active toggle
    $('[data-toggle="treeview."].is-expanded').parent().toggleClass('is-expanded');
    })();

  }

}