html 如何在Angular中重定向页面?

s8vozzvw  于 2022-11-20  发布在  Angular
关注(0)|答案(6)|浏览(189)

我正在尝试将一个组件重定向到另一个组件(如页面重定向)
Angular link
这是我代码

应用程序路由.模块.ts

import { RoleComponent } from './role/role.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: 'role', component: RoleComponent },

];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

顶部标题.组件.html

<ul class="navbar-nav mr-auto">
       <li class="nav-item">
          <a class="nav-link" href="#">Verified</a>
        </li>
        <li class="nav-item">
          <a routerLink="/role" class="nav-link" href="#">ROLES</a>
        </li>
      </ul>

应用程序组件.html

<div class="container p-md-0">
<app-top-header></app-top-header>
<router-outlet></router-outlet>
<app-main-contain></app-main-contain>
</div>
wyyhbhjk

wyyhbhjk1#

您可以使用Router类的router.navigate函数。只需从@angular/router导入Router,并在constructor(private router: Router)中为其创建一个对象,然后使用router.navigate(['/roles']);

import { RoleComponent } from './role/role.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: 'role', component: RoleComponent },

];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {
  constructor(private router: Router)
}

functionOnWhichRedirectShouldHappen(){
  this.router.navigate(['/role']);
}

HTML语言

<ul class="navbar-nav mr-auto">
   <li class="nav-item">
       <a class="nav-link" href="#">Verified</a>
   </li>
   <li class="nav-item">
      <button (click)="functionOnWhichRedirectShouldHappen()">ROLES</button>
   </li>
</ul>
ttisahbt

ttisahbt2#

你的app-routing.module.ts是正确的。现在,你可以在你的组件中导入 Router 并使用它来重定向。

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() { }

  redirect() {
      this.router.navigate(['role']);
  }

}

在component.html中调用redirect()函数

<button (click)="redirect()"></button>
rdlzhqv9

rdlzhqv93#

只需将此路径添加到app-routing.module.ts文件中,以便它可以知道路径:

{ path: 'AppComponent', component: AppComponent }
q0qdq0h2

q0qdq0h24#

我使用了以下解决方案:

redirectTo() {
    window.history.back()
  }
5rgfhyps

5rgfhyps5#

您只需将其添加到您的app-routing.module.ts中,即可将页面重定向到另一个页面
文件名:

{ path: '', redirectTo: 'component route name', pathMatch: 'full' },
{ path: 'component route name', component: MyComponent },
yshpjwxd

yshpjwxd6#

尝试以下代码
您可以使用Angular $窗口

$window.location.href = '/index.html';

控制器中的用法示例:

(function () {
    'use strict';

    angular
        .module('app')
        .controller('LoginCtrl', LoginCtrl);

    LoginCtrl.$inject = ['$window', 'loginSrv', 'notify'];

    function LoginCtrl($window, loginSrv, notify) {
        /* jshint validthis:true */
        var vm = this;
        vm.validateUser = function () {
             loginSrv.validateLogin(vm.username, vm.password).then(function (data) {          
                if (data.isValidUser) {    
                    $window.location.href = '/index.html';
                }
                else
                    alert('Login incorrect');
            });
        }
    }
})();

相关问题