Angular Маршрутизатор: невозможно прочитать свойство '' из неопределенного

Question

Я пытаюсь реализовать маршрутизацию в моей программе. Базовая c маршрутизация работает, если я наберу URL в браузере. Однако, если я хочу использовать мою кнопку из MainComponent, я получаю сообщение об ошибке: Невозможно прочитать свойство 'loadFrom Json' неопределенного.

До того, как я внедрил маршрутизатор, он просто работал нормально, как сейчас.

Мой app-routing.module:

...
const appRoutes: Routes = [
{ path: 'start',        component: FrontPageComponent },
{ path: 'action',        component: MainComponent },
{ path: '',   redirectTo: '/start', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
  ];
...

Мой главный компонент вызывает функцию с помощью кнопки. Однако часть функции вызывает другую функцию, которая находится в дочернем компоненте.

MainComponent. html:

  <button routerLink="/action" type="submit" (click)="function()" >Load</button>
   ..
   ..
  <router-outlet></router-outlet>

MainComponent.ts

@ViewChild(ChildComponent) childComponent; <--imported ChildComponent with @ViewChild
      ...
      function(): void { 
        this.DownloadService.downloadResource(this.url).subscribe(
          json => this.childComponent.loadFromJson(json, this.url),   <--function from childComponent
          err => this.setError(err),
        );
      }

Функция в дочерний компонент:

childComponent.ts:

 private loadFromJson(json: any, id: string): void {
   this.initEmptyContainer();
   this.addFromJson(json, id);
}
 ...

Почему он не может прочитать свойство и что я могу сделать, чтобы исправить его?

Answer 1

запросы просмотра устанавливаются до вызова обратного вызова ngAfterViewInit.

@ViewChild(ChildComponent) childComponent;

 downloadResource (): void { 
  this.DownloadService.downloadResource(this.url).subscribe(
     json => this.childComponent.loadFromJson(json, this.url),
          err => this.setError(err),
        );
      }

 ngAfterViewInit(): void {
    this.downloadResource();
  }

проверка здесь для получения более подробной информации

Answer 2

Для ссылки на переменную класса внутри вашего метода используйте this.childComponent

Попробуйте это

@ViewChild(ChildComponent) childComponent;

...

function(): void { 
    this.DownloadService.downloadResource(this.url).subscribe(
      json => this.childComponent.loadFromJson(json, this.url),   // <-- Refer your childComponent using this
      err => this.setError(err),
    );
}