类“NeedauthGuard”错误地实现了类“CanActivate”。您的意思是扩展'canactivate'并将其成员继承为子类吗？

Question

           import { Injectable } from '@angular/core';
import { HttpClientModule, HttpClient, HttpRequest } from '@angular/common/http';
import { Observable, from } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { CanActivate } from '@angular/router/src/utils/preactivation';
import { LoginComponent } from '../Component/login/login.component';
import { Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable({
  providedIn: 'root'
})//NeedAuthGuard
export class ServiceTService {
  constructor(
    private http: HttpClient
  ) {
  }
  users: any = { 
    id: String,
    Email:String,
    Password: Number
  };
  getUser(): Observable<any> {
    return this.http.get<any>("http://localhost:3000/users");

  }
}


@Injectable()
export class NeedAuthGuard implements CanActivate {

  constructor(private customerService: LoginComponent, private router: Router)   {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    const redirectUrl = route['/Store'];

    if ( this.customerService.UserIsLogin) {
      return true;
    }
    this.router.navigateByUrl(
      this.router.createUrlTree(
        ['/login'], {
          queryParams: {
            redirectUrl
          }
        }
      )
    );
    return false;
  }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent, DialogOverviewExampleDialogPassword, DialogOverviewExampleDialogLogin, DialogOverviewExampleDialog } from './Component/login/login.component';
import { RouterModule, ROUTES, Routes, ActivatedRouteSnapshot } from '@angular/router';
import { HttpClientModule, HttpClient, HttpRequest } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { StoreComponent } from './Component/store/store.component';
import { NAVComponent } from './Component/nav/nav.component';
import { MatDialogModule, MatDialogRef } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NeedAuthGuard } from './Service/service-t.service';
const Router: Routes = [
  { path: "Login", component: LoginComponent, data: { requiresLogin: true } },
  { path: "Store", component: StoreComponent, data: { requiresLogin: true } },
  { path: '**', component: LoginComponent }
]
@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    StoreComponent,
    NAVComponent,
    DialogOverviewExampleDialog,
    DialogOverviewExampleDialogPassword,
    DialogOverviewExampleDialogLogin,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    MatDialogModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(Router)
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [DialogOverviewExampleDialog, DialogOverviewExampleDialogPassword, DialogOverviewExampleDialogLogin]

})
export class AppModule { }

>

登录组件

从'@Angulation/Core'导入{Component,OnInit,ViewChild,AfterViewInit,Inject,Injectable}；从'../../Service/Service-T.Service‘导入{ServiceTService}；从'@Angulation/Router'导入{RouterModule,Router,ActivatedRouteSnapshot,RouterStateSnapshot}；从'@Angulation/Core'导入{Directive,ElementRef,Input}；从'RXJS'导入{Observable,Subject}；从'@angull/router/src/utils/preactivation'导入{CanActivate}；从“src/app/app.component”导入{AppComponent}；从“../store/store.component”导入{StoreComponent}；从'@Angulation/Material'导入{MatDialog,MatDialogRef,MAT_DIALOG_DATA,MatDialogModule}；从'@Angulation/Animations'导入{state}；

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

export class LoginComponent implements OnInit   {
  users: any = { 
    id: "",
    Email:"",
    Password:"", 
    requiresLogin: false
  };
  UserIsLogin:boolean = false; 
  constructor(
    private service: ServiceTService,
    private routerT : Router,
    private dialog: MatDialog
  ) {    
  }
  isLogin( Login) :boolean{ 
    this.UserIsLogin= Login;
    return this.UserIsLogin; 
  }
  onSubmit( userLogin) {
     this.service.getUser().subscribe( (result: any) => {
       if(userLogin.Email==""){ this.dialog.open(DialogOverviewExampleDialog, {width: '350px'} )  }
       if(userLogin.Password==''){this.dialog.open(DialogOverviewExampleDialogPassword, {width: '350px'})}
       for (let users of result){
         if( users.Email == userLogin.Email && users.Password == userLogin.Password ){
            alert("currect"); 
           this.isLogin(true);
           return this.routerT.navigate(['/Store']);
           }else {
                  this.dialog.open(DialogOverviewExampleDialogLogin, {width: '350px'})}
                  this.isLogin(false);
                  return false; 
                }
        });
  }
  ngOnInit() {
  }
}

@Component({
  selector: 'DialogOverviewExampleDialog',
  templateUrl: 'dialog-Error.html'
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: LoginComponent) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

@Component({
  selector: 'DialogOverviewExampleDialogPassword',
  templateUrl: 'dialog-Password.html'
})
export class DialogOverviewExampleDialogPassword {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialogPassword>,
    @Inject(MAT_DIALOG_DATA) public data: LoginComponent) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

@Component({
  selector: 'DialogOverviewExampleDialogLogin',
  templateUrl: 'dialog-incorrectLogin.html'
})
export class DialogOverviewExampleDialogLogin {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialogLogin>,
    @Inject(MAT_DIALOG_DATA) public data: LoginComponent) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

Answer 1

我想你从错误的路径导入。不要尝试以这种方式导入canactivate:

import { CanActivate } from '@angular/router/src/utils/preactivation';

但是：

import { CanActivate } from '@angular/router';

以便您的导入如下所示

import { Router, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate } from '@angular/router';