在 Angular 中编写重定向服务导致 Null 注入错误

Question

我正在尝试编写一个 Angular (11.2.9) 路由服务，它主要使我能够自动将使用从一个站点路由到指定的站点。

例如：当来宾用户访问该站点时，可以通过将他引导至“登录页面”的按钮登录他的帐户（如果他已经注册）。当他登录到该站点时，没有前面提到的按钮，但是当他在地址栏中键入“/prijava”时，用户仍然可以登录。我想将他从“/prijava”（和其他类似站点）自动重定向到指定站点（现在硬编码）。

prijava.component.ts:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AvtentikacijaService} from '../../storitve/avtentikacija.service';
import { PovezavaService } from '../../storitve/povezava.service';
import { UsmerjanjeService} from '../../storitve/usmerjanje.service';
import { ZgodovinaService } from '../../storitve/zgodovina.service';

@Component({
  selector: 'app-prijava',
  templateUrl: './prijava.component.html',
  styleUrls: ['./prijava.component.css']
}) 

export class PrijavaComponent implements OnInit {


public href: string ="";

constructor(
private usmerjevalnik: Router,
private avtentikacijaStoritev: AvtentikacijaService,
private usmerjanjeStoritev: UsmerjanjeService,
) {}

/*Other variables, etc. Sending the data*/

ngOnInit() {

//the routing service is called here ,I'd like to check as soon as posibile for these conditions
this.usmerjanjeStoritev.preusmeriNezazelene();
 }

}

我写的重定向服务：

usmerjanje.service.ts:

import { Router} from '@angular/router';
import {AvtentikacijaService} from './avtentikacija.service';


export class UsmerjanjeService {

constructor(
 private usmerjevalnik: Router,
 private avtentikacijeStoritev: AvtentikacijaService

) { }

//redirect unwanted sites, 
public preusmeriNezazelene():void{


  //if the user is logged in
  if(this.avtentikacijeStoritev.jePrijavljen()){

  //redirect from /login, /registration, /passwordRecovery

   //just for printing something out
    console.log(this.usmerjevalnik.url);
   }
  }
}

但是，当我使用 /prijava（登录）单击 routerLink 时，我得到一个空站点和以下错误。

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[UsmerjanjeService -> UsmerjanjeService -> UsmerjanjeService]:

NullInjectorError: No provider for UsmerjanjeService! NullInjectorError: R3InjectorError(AppModule)[UsmerjanjeService -> UsmerjanjeService -> UsmerjanjeService]:

NullInjectorError: No provider for UsmerjanjeService! at NullInjector.get (core.js:11102) at R3Injector.get (core.js:11269) at R3Injector.get (core.js:11269) at R3Injector.get (core.js:11269) at NgModuleRef.get (core.js:25299) at Object.get (core.js:25013) at lookupTokenUsingModuleInjector (core.js:3389) at getOrCreateInjectable (core.js:3501) at Module.ɵɵdirectiveInject (core.js:14693) at NodeInjectorFactory.PrijavaComponent_Factory [as factory] (prijava.component.ts:14) at resolvePromise (zone-evergreen.js:798) at resolvePromise (zone-evergreen.js:750) at zone-evergreen.js:860 at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:28561) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167)enter code here at drainMicroTaskQueue (zone-evergreen.js:569) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484) at invokeTask (zone-evergreen.js:1621)`

我试过了：

在 prijava.ts 的 @Component 声明中包含“providers”字段只会抛出另一个错误：无法通过依赖注入创建 class 'UsmerjanjeService'，因为它没有Angular 装饰器。这将导致在运行时出错。

将 @Injectable() 装饰器添加到 'UsmerjanjeService'，或配置不同的提供程序（例如具有 'useFactory' 的提供程序）。

Implementig an AuthGuard implementing CanActivate canActactavate 给我以下错误，此时我不明白：

Property 'canActivate' in type 'AuthGuard' is not assignable to the same property in base type 'CanActivate'.
Type '() => void' is not assignable to type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | UrlTree | Observable<boolean | UrlTree> | Promise<...>'.
Type 'void' is not assignable to type 'boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree>'.ts`

或者我还有一个历史服务有什么我可以（重新）使用那个脚本吗？

zgodovina.service.ts:

import { Injectable } from '@angular/core';
        import { Router, NavigationEnd } from '@angular/router';
        import { filter } from 'rxjs/operators';
        @Injectable({
          providedIn: 'root'
        })
    export class ZgodovinaService {`

      private urlNaslovi: string[] = [];

      constructor(private usmerjevalnik: Router) {
    this.usmerjevalnik.events
      .pipe(filter(dogodekUsmerjanja => dogodekUsmerjanja instanceof NavigationEnd))
      .subscribe((dogodekUsmerjanja: NavigationEnd) => {
        const url = dogodekUsmerjanja.urlAfterRedirects;
        this.urlNaslovi = [...this.urlNaslovi, url];
      })
      }
      //filters last urls without the unwanted ones -> navigation back
      public vrniPredhodnjeUrlNaslove(): string {
        const dolzina = this.urlNaslovi.length;
        return dolzina > 1 ? this.urlNaslovi[dolzina - 2] : '/';
           }
         //filters last urls without the unwanted ones -> navigation back
      public vrniPredhodnjeUrlNasloveBrezIzbranih(): string {
        const izloci: string[] = ['/registracija', '/prijava', '/obnoviGeslo','/vnesiNovoGeslo/:eposta', 
    '/uporabniki/:idUporabnika', ];
        const filtrirano = this.urlNaslovi.filter(url => !izloci.includes(url));
        const dolzina = filtrirano.length;
        return dolzina > 1 ? filtrirano[dolzina - 1] : '/';
      }

    }

如何正确实现重定向服务？

Answer 1

如果你想在某些情况下将用户重定向到另一条路由而不是/prijava，比如你的情况是从登录页面重定向，如果用户已经登录，我会为该路由添加一个路由保护如此处所述：https://angular.io/api/router/CanActivate

路由守卫可以return 一棵url 树，指定重定向到哪里或return e。 G。 true 让用户进入登录页面（如果尚未登录）。

在 Angular 中编写重定向服务导致 Null 注入错误

Writing a redirect service in Angular results in a Null injection error

angular

typescript

url-routing

angular11