如何在Angular中重定向页面？

Question

我正在尝试将一个组件重定向到另一个组件（例如页面重定向）

角链接

这是我的代码

应用程序路由.module.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 {}

top-header.component.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>

原文由 Dhrupal Suthar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 Router 类的 router.navigate 函数。只需从 @angular/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>

原文由 Deepshikha Chaudhary 发布，翻译遵循 CC BY-SA 4.0 许可协议