angular - TS2345: Argument of type 'string | null' kan ikke tildeles parameter av type 'string | UrlTree'

Tittelen på dette spørsmålet er meldingen som Angular CLI-kompilatoren kaster.

Jeg har denne konstruktøren i app.component.ts:

    export class AppComponent {
      constructor(private userService: UserService, private auth: AuthService, router: Router) {
       auth.user$.subscribe(user => {
        if (user) {
         userService.save(user);

         let returnUrl = localStorage.getItem('returnUrl');
         router.navigateByUrl(returnUrl);
      }
    });
  }
}

I koden som er vedlagt ovenfor, har jeg 'returnURL' understreket, og hvis jeg setter markøren over det, står det:

«Argument av typen 'string | null' kan ikke tildeles parameteren av typen 'string | UrlTree'. Typen 'null' kan ikke tildeles typen 'string | UrlTree'.»

Jeg har en user.service.ts som er relatert til Firebase:

    import { Injectable } from '@angular/core';
    import { AngularFireDatabase } from 'angularfire2/database';
    import * as firebase from 'firebase';

    @Injectable()
    export class UserService {

        constructor(private db: AngularFireDatabase) { }
  
          save(user: firebase.User) {
          this.db.object('/users/' + user.uid).update({
            name: user.displayName,
            email: user.email
         });
       }
     }

Har noen en idé om hva som er kompilatorens problem her? Jeg har også lagt ved konsollmeldingen.

Svar #1

Du har linjen

let returnUrl = localStorage.getItem('returnUrl');

Funksjonen getItem() returnerer en null | string. Hvis elementet ikke finnes i lagringen, returnerer funksjonen null.

router.navigateByUrl(returnUrl); forventer at returnUrl er av typen string | UrlTree, men returnUrl blir antydet som null | string fra initialiseringen, derav feilen

Det finnes ulike måter du kan løse dette på, en enkel måte ville være å typkaste den returnerte verdien til en streng

let returnUrl = localStorage.getItem('returnUrl') as string;

Svar #2

Feilen gir deg all informasjonen du trenger.

localStorage.getItem returnerer enten en streng eller null, og router.navigateByUrl forventer en parameter som enten er en string eller et UrlTree. Du må sjekke returverdien fra localStorage.getItem for å forsikre deg om at den ikke er null før du kaller router.navigateByUrl, fordi du kan ikke kalle den med null.

let returnUrl = localStorage.getItem('returnUrl');
if (returnUrl) { // i.e, not null and not empty string 
    // now returnUrl cannot be null, so it must be a string, which is valid to use in this call
    router.navigateByUrl(returnUrl);
}

Relaterte artikler