如何导航到角度 6 中的其他页面？答案

【问题标题】：How to navigate to other page in angular 6?如何导航到角度 6 中的其他页面？
【发布时间】：2019-01-25 08:19:48
【问题描述】：

我试图将我的页面从登录重定向到另一个页面。我遵循此代码。

我的登录组件ts文件：

import { Router } from '@angular/router';

constructor(private router: Router) {
}

funLogin(mobilenumber){
    this.router.navigateByUrl('registration');
}

在我的 html 中，我在提交 btn 中调用此函数，

<button class="common-btn btn" (click)="funLogin(mobileNo.value)">Submit</button>

In my app.login.routing file,
 export const loginRouting: Routes = [
{
 path: '', component: DashboardRootComponent, canActivateChild: [],
    children: [
        { path: '', component: DashboardComponent, pathMatch: 'full' },
        { path: 'home', component: HomeComponent },
        { path: 'registration', component: RegistrationComponent },
    ]
   }
  ]

我已尝试使用“this.router.navigate”和引用的链接。但它没有用。谁能告诉我我哪里出错了，或者如果你能给我一个工作样本会更好。

【问题讨论】：

您在尝试上述代码时是否遇到任何错误？

标签： html angular url routing angular6

【解决方案1】：

@sasi.. 试试这样，

 <a routerLink="/registration"><button class="btn btn-success" > Submit </button></a>

更新：

为了在您的应用程序中使用路由，您必须注册允许角度路由器呈现视图的组件。

我们需要在App Module 或其任何Feature Module（您当前的工作模块）中注册我们的组件，以便路由到特定的组件视图。

我们可以通过两种方式注册组件

.forRoot(appRoutes) 用于应用级组件注册，例如 featuteModules(ex. UserManagement) 和 components，您想在 root level 注册。

.forChild(featureRoutes) 用于功能模块 child components（例如 UserDelete、UserUpdate）。

你可以像下面这样注册，

  const appRoutes: Routes = [
      { path: 'user', loadChildren: './user/user.module#UserModule' },
      { path: 'heroes', component: HeroListComponent },
   ];

  @NgModule({
    imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(
      appRoutes
    )
  ],

PS : 为了从一个组件导航到另一个组件，您必须在 @angular/router 包中相应的 Module Imports 数组中包含 RouterModule。

您可以通过两种方式在 Angular 中将一个页面导航到另一个页面。（两者在包装器级别是相同的，但我们这边的实现有点不同。）

routerLink directive

routerLink 指令为您提供绝对路径匹配，如 Router 类的 navigateByUrl()。

 <a [routerLink]=['/registration']><button class="btn btn-success" > Submit </button></a>

如果您使用dynamic values 生成链接，则可以传递路径段的array，然后为每个段传递params。

例如 routerLink=['/team', teamId, 'user', userName, {details: true}] 表示我们要生成指向 /team/11/user/bob;details=true 的链接。

我们在使用routerLink时需要记住一些有用的点。

如果第一段以/开头，路由器会查找路由从应用的根目录。
如果第一段以 ./ 开头，或者不以斜杠开头，路由器将改为查看当前激活的子节点路线。
如果第一段以 ../ 开头，则路由器将上升一个级别。

更多信息请看这里.. routerLink

Router class

我们需要将 Router 类注入到组件中，以便使用它的方法。

导航的方法不止两种，例如 navigate() 、navigateByUrl() 等。但我们主要使用这两种。

navigate()：

根据提供的命令数组和起点进行导航。如果没有提供起始路线，则导航是绝对的。
```
 this.route.navigate(['/team/113/user/ganesh']);
```
navigate() 命令将附加最新的字符串附加到现有的 URL。我们也可以像下面这样从这个方法解析queryParams，
```
 this.router.navigate(['/team/'], {
    queryParams: { userId: this.userId, userName: this.userName }
 });
```
您可以在导航组件中使用 ActivatedRoute 获取这些值。你可以在这里查看更多关于paramMap、snapshot(no-observable alternative)的信息。
navigateByUrl()

根据提供的 URL 进行导航，该 URL 必须是绝对的。
```
 this.route.navigateByUrl(['/team/113/user/ganesh']);
```
navigateByUrl() 类似于直接更改地址栏——我们提供的是整个新网址。

【讨论】：

【解决方案2】：

我正在使用 Angular 7，并以这种方式将其解决到我的项目中。

1.首先我们需要将这个Modules实现到我们的app.module.ts文件中

import { AppRoutingModule} from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({

  imports: [
    BrowserModule,
    AppRoutingModule, 
    FormsModule,
  ],

})

2.然后打开 your.component.html 文件，然后触发一个方法来导航到你想去的地方

<button class="btn btn-primary" (click)="gotoHome()">Home</button>

3.然后转到您要导航的.component.ts 文件。并在此处添加此代码。

import { Router } from '@angular/router';

export class YourComponentClassName implements OnInit {

    constructor(private router: Router) {}

    gotoHome(){
        this.router.navigate(['/home']);  // define your component where you want to go
    }

}

4.最后想说的是要小心照顾你的 app-routing.module.ts 你必须有你想要导航的组件路径，否则它会给你错误。就我而言。

const routes: Routes = [
  { path:'', component:LoginComponent},
  { path: 'home', component:HomeComponent },  // you must add your component here
  { path: '**', component:PageNotFoundComponent }
];

谢谢，我想分享这个路由部分的所有案例。快乐编码！！！

【讨论】：

【解决方案3】：

navigateByUrl 需要一个绝对路径，因此前导 / 可能会将您带到正确的页面

您也可以使用导航，不需要前导 /，但语法略有不同，因为它需要一个数组作为路径

https://angular.io/api/router/Router#navigateByUrl

【讨论】：

【解决方案4】：

<a class="nav-link mt-1" [routerLink]="['/login']"><i class="fa fa-sign-in"></i>&nbsp;&nbsp;Login</a>

【讨论】：

【解决方案5】：

如果您想以编程方式执行此操作，可以使用：

 RedirectToNewPage(url : string){
   const a = document.createElement('a');
   a.setAttribute('href', url);
   a.setAttribute('target', '_blank');
   document.body.appendChild(a);
   a.click();
   document.body.removeChild(a);
 }

或者

RedirectToNewPage(url : string){
  window.open(url, '_blank');
}

但第一个解决方案更好，因为某些浏览器可能会阻止由 window.open(url, "_blank"); 创建的弹出窗口；

【讨论】：