перенаправить на другой html в angular

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, и у вас также есть компонент, в котором происходит большая часть logi c. Вы можете вставить logi c в HTML для рендеринга материала или показать материал на основе определенного условия или практически любых манипуляций с DOM, но то, что вы пытаетесь сделать, вообще не относится к DOM.

Вы хотите запускать свой код в компоненте, а не в HTML, помните, что logi c в HTML используется в основном для визуализации определенных вещей и управления DOM.

Вот как это сделать:

Когда вы хотите, чтобы ваша функция запускалась? Если вы хотите, чтобы он запускался, например, при отрисовке страницы, используйте ловушку жизненного цикла NgOnInit. Вот простая его реализация.

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

      }
    }

Несколько замечаний:

1. Я бы рекомендовал запускать этот тип logi c в вашем коде, но вместо этого использовать Route Guard, который будет запускаться перед каждой страницей. Оформить заказ: https://angular.io/guide/router#preventing -unuthorized-access

2. Я не рекомендую помещать функции в HTML, это не очень хорошо для производительности. Вместо этого используйте переменные в вашем HTML и запустите функцию в компоненте.

Answer 2

Вы должны go способом Angular, который использует Router -> CanActivate

Angular guard 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
  },
  // ...
]

Answer 3

В вашем контроллере

import {RouterModule, Routes} from '@ angular / router'; конструктор (частный маршрутизатор: Router)

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

В вашем 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>