Angular 路由器：无法读取未定义的属性“”

Question

我试图在我的程序中实现路由。如果我在浏览器中输入 URL，则基本路由将起作用。但是，如果我想使用 MainComponent 中的按钮，我会遇到错误：无法读取未定义的属性 'loadFromJson'。

在我实现路由器之前，它就像现在一样运行良好。

我的 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

要在方法中引用类变量，请使用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),
    );
}

Answer 2

视图查询是在调用 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();
  }

查看here了解更多详情