Вызовите метод во вложенном компоненте - PullRequest
Новая
       11

Вызовите метод во вложенном компоненте

1 голос
/ 01 декабря 2019

У меня есть два компонента (1- app-student-list 2- app-student-detail ).

Я хочу использовать student-detail вstudent-list как показано ниже:

app-student-detail.html 

<p>Student Detail Component is here ....</p>

app-student-detail.ts 

export class StudentDetailComponent {
  showDetail() {
    alert("We are in student-detail...");
  }
}

app-student-list.html 

<p>Student List Component is here ....</p>
<app-student-detail></app-student-detail>

app-student-list.ts 

export class StudentListComponent implements OnInit {

  @ViewChild(StudentDetailComponent, { static: true }) studentDetail: StudentDetailComponent;
  constructor() { }

  ngOnInit() {
  }

  showDetail() {
    this.studentDetail.showDetail();
  }

}

В методе showDetail я хочу вызвать метод StudentDetailComponent с именем showDetail

И, наконец, я хочу использовать список студентов в AppComponent

app.component.ts 

export class AppComponent {
  public isShow = false;

  @ViewChild(StudentListComponent, { static: true }) studentList: StudentListComponent;
  title = 'AngualrViewChild';

  showDetail() {
    this.isShow = true;
    this.studentList.showDetail();
  }

}

app.component.html 

<p>App Component is here ....</p>
<app-student-list *ngIf="this.isShow"></app-student-list>

<hr />
<button type="button" (click)="this.showDetail()">
    Show Detail
</button>

Когда я вызываю showDetail метод StudentListComponent, я получаю следующую ошибку: 

AppComponent.html:6 ERROR TypeError: Cannot read property 'showDetail' of undefined

Примечание : Когда я удаляю ngIf выше, он будет отлично работать

Stackblitz здесь

...