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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/50343044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 15:41:27  来源:igfitidea点击:

How to redirect Page in Angular?

htmlangular

提问by Dhrupal Suthar

I'm Trying to redirect one component to another (like page redirect)

我正在尝试将一个组件重定向到另一个组件(如页面重定向)

Angular link

角度链接

here is my code

这是我的代码

app-routing.module.ts

app-routing.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

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>

AppComponent.html

应用组件.html

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

回答by Deepshikha Chaudhary

You can use router.navigatefunction of the Router class. Just import Router from @angular/routerand create a object for it in the constructor(private router: Router)and use router.navigate(['/roles']);

您可以使用router.navigateRouter 类的功能。只需从中导入路由器@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(){
  router.navigate(['/role']);
}

HTML

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>

回答by Darkade

Your app-routing.module.tsis fine. Now, in your component you can do Import Routerand use it to redirect.

你的app-routing.module.ts很好。现在,在您的组件中,您可以执行导入路由器并使用它进行重定向。

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']);
  }

}

And in your component.html just call that redirect()function

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

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

回答by manjeet chauhan

just add this path in your app-routing.module.tsfile so that it can know the path:

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

{ path: 'AppComponent', component: AppComponent }

回答by PPL

Try below code

试试下面的代码

You can use Angular $window

您可以使用 Angular $window

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

Example usage in a contoller:

控制器中的示例用法:

(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');
            });
        }
    }
})();