Question

有人可以帮我吗，我想重定向到另一个错误页面的评论到底在哪里

<ng-container *ngIf="!loginService.verificarToken(); else postLogin">
        <ul class="navbar-nav mr-auto"><!--mr-auto-->
          <li class="nav-item">
            <a class="nav-link" routerLink="/HOME" routerLinkActive="active">HELLO</a>
          </li>
        </ul>
      </ng-container>
     <ng-template #postLogin>
      <ul class="navbar-nav mr-auto"><!--mr-auto-->
        <!--
          in case it is false I want you to redirect me to another html page
          ????
        -->
      </ul>
     </ng-template>

Answer 1

在Angular中，您有HTML，也有组件，其中大多数逻辑都在其中发生。您可以在HTML中插入逻辑以呈现内容，或根据特定条件或几乎任何DOM操作显示内容，但是您尝试执行的操作与DOM根本无关。

您要在组件而不是HTML中运行代码，请记住HTML中的逻辑主要用于呈现某些内容并操纵DOM。

因此，这是执行此操作的方法：

您希望什么时候运行函数？例如，如果您希望它在页面呈现时运行，请使用NgOnInit生命周期挂钩。这是它的简单实现。

export class App implements OnInit {
       constructor(private router: Router) { }
      ngOnInit() {
           if (!loginService.verificarToken()) {
              this.router.navigate(['/login']);
            }

      }
    }

几件事要注意：

我建议您在代码中运行这种类型的逻辑，但要使用Route Guard，它会在每个页面之前运行。查看： https://angular.io/guide/router#preventing-unauthorized-access
我不建议将函数放在HTML内，因为这样做不利于性能。而是在HTML中使用变量，然后在组件中运行该函数。

Answer 2

在您的app-routing.module.ts中添加您的路线：

    import { pageNameComponent} from './pageNameComponent.component';
    import { AppComponent } from './app.component';
    import { NgModule }             from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    
    const routes: Routes = [
      { path: '', redirectTo: '/AppComponent', pathMatch: 'full' },
      { path: 'pageName', component: pageNameComponent },
    
    ];
    
    @NgModule({
      imports: [ RouterModule.forRoot(routes) ],
      exports: [ RouterModule ]
    })
    export class AppRoutingModule {}

在您的html中：

    <ul class="navbar-nav mr-auto"><!--mr-auto-->
       <a routerLink="/pageName" class="nav-link" href="#">pageName</a>
   </ul>

Answer 3

在您的控制器中

从'@ angular / router'导入{RouterModule，Routes}; 构造函数（专用路由器：路由器）

postloginRedirect(){
  router.navigate(['/routeforPostlogin']);
}

在您的HTML中 << / p>

ng-template #postLogin>
          <ul class="navbar-nav mr-auto"><!--mr-auto-->
    <span [hidden]="postloginRedirect()"></span>        
    <!--
              in case it is false I want you to redirect me to another html page
              ????
            -->
          </ul>
         </ng-template>

Answer 4

您应该采用使用Router-> CanActivate

的Angular方法

警卫AuthGuard

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

import { LoginService } from './login.service' // <-- your service

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(
    private router: Router,
    private loginService: LoginService
  ) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
      const isLoggedIn = this.loginService.verificarToken() // <-- verificarToken boolean

      if (!isLoggedIn) {
        this.router.navigate(['login') // <-- redirect to login
      }

      return isLoggedIn
  }
}

然后在您的路线上：

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  {
    path: 'dashboard', component: UsersComponent,
    canActivate: [AuthGuard], // <-- your guard redirect
  },
  // ...
]

重定向到角度的另一个HTML

4 个答案: