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
How to redirect Page in Angular?
提问by Dhrupal Suthar
I'm Trying to redirect one component to another (like page redirect)
我正在尝试将一个组件重定向到另一个组件(如页面重定向)
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.navigate
function of the Router class. Just import Router from @angular/router
and create a object for it in the constructor(private router: Router)
and use router.navigate(['/roles']);
您可以使用router.navigate
Router 类的功能。只需从中导入路由器@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.ts
file 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');
});
}
}
})();