Angular 7 внедренный сервис генерирует TypeError после refre sh при попытке вызвать методы - PullRequest
Новая
       8

Angular 7 внедренный сервис генерирует TypeError после refre sh при попытке вызвать методы

0 голосов
/ 23 февраля 2020

У меня есть компонент DevicePage, который запрашивает экземпляр ServiceAdapter в своем конструкторе, а затем использует этот ServiceAdapter для запроса информации в ngOnInit(). ServiceAdatper ТАКЖЕ запрашивает экземпляр Service для выполнения http-вызовов, а затем преобразует ответ в необходимые объекты для DevicePage. Мой упрощенный код: 

@Component({
  selector: 'app-device',
  templateUrl: './device.page.html',
  styleUrls: ['./device.page.scss'],
})
export class DevicePage implements OnInit {

  private device: Device;    // beacon used in the HTML template to display info

  constructor(private activatedRoute: ActivatedRoute, private adapter: ServiceAdapter) {
  }

  ngOnInit() {
    // Grab the beacon details
    this.adapter
      .getDevice(this.activatedRoute.snapshot.paramMap.get('id'))
      .subscribe(device=> this.device = device);
  }

}

@Injectable({
    providedIn: 'root'
})
export class ServiceAdapter {

    constructor(private service: Service) {
    }

    getDevice(id: string): Observable<Device> {
        this.service.getDevice(id).pipe(
            map(response => {
                return this.extractDevice(response.data).shift();
            })
        )
    }

    private extractDevice(devices: Device[]) {
        return devices.map(device => <Beacon> {
            id: device.identifier,
            name: device.shadow.name
        });
    }
}

@Injectable({
  providedIn: 'root'
})
export class Service {
  constructor(http: HttpClient) {
    this.http = http;
  }

  getDevice(id): Observable<DevicesResponseV3> {
    return this.http.get<DevicesResponseV3>(URL_DEVICES)
      .pipe(catchError(err => this.handleError(err)));
  }

   private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(
        `Error response from ${error.url} ` +
        `Backend returned code ${error.status} ` +
        `body was: ${error.message}`);
    }
    // return an observable with a user-facing error message
    return throwError(
      'Something bad happened; please try again later.');
  }
}

Когда я впервые попадаю на эту страницу после первоначального открытия приложения и перехода к нему, все работает, как и ожидалось. Однако, когда я обновляю sh страницу, я получаю следующую ошибку: ERROR TypeError: "this.adapter.getDevice(...) is undefined". Сам сервис не является неопределенным, я не уверен, что происходит.

Содержимое моего файла app.module.ts: 

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    IonicStorageModule.forRoot(),
    AngularFireModule.initializeApp(environment.firebase, 'herald-client-webapp'),
    AngularFireAuthModule, // imports firebase/auth, only needed for auth features
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

1 Ответ

0 голосов
/ 24 февраля 2020

Вы обновили sh страницу, сохранив некоторый код, когда ioni c подача выполняется?

, если это так, не волнуйтесь, это сработает, когда вы опубликуете sh приложение, установите отладчик и посмотрите на: 

getDevice(this.activatedRoute.snapshot.paramMap.get('id'))

идентификатор может быть нулевым. Вы также можете получить параметр при входе на страницу: 

ionViewWillEnter() {
    this.estimote
      .getDevice(this.activatedRoute.snapshot.paramMap.get('id'))
      .subscribe(device=> this.device = device);
}
...