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

Question

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

我的登录组件 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”和引用的链接。但它没有用。谁能告诉我我哪里出错了，或者如果你能给我一个工作样本会更好。

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

Answer 1

@sasi .. 试试这样，

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

更新 ：

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

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

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

1. .forRoot(appRoutes) for app level component registration like featuteModules (ex. UserManagement) and components which you want register at root level .
2. .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 包的相应模块导入数组中包含 RouterModule 。

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

routerLink 指令

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

  <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 类注入到组件中，以便使用它的方法。

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

1. 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) 的信息。

1. navigateByUrl()

根据提供的 URL 导航，该 URL 必须是绝对的。

     this.route.navigateByUrl(['/team/113/user/ganesh']);

navigateByUrl() 类似于直接更改地址栏——我们提供了 全新 的 URL。

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

Answer 2

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

1.首先我们需要将这个模块实现到我们的 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.然后打开你的.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 }
];

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

原文由 MD JULHAS HOSSAIN 发布，翻译遵循 CC BY-SA 4.0 许可协议