如何导航到角度 6 中的其他页面? [英] How to navigate to other page in angular 6?

问题描述

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

我的登录组件ts文件:

从'@angular/router'导入{路由器}；构造函数(私有路由器:路由器){}funLogin(手机号码){this.router.navigateByUrl('注册');}

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

<button class="common-btn btn" (click)="funLogin(mobileNo.value)">提交</button>在我的 app.login.routing 文件中，导出 const loginRouting: 路由 = [{路径:''，组件:DashboardRootComponent，canActivateChild:[]，孩子们: [{路径:''，组件:仪表板组件，路径匹配:'完整'}，{ 路径:'home'，组件:HomeComponent }，{ 路径:'注册'，组件:RegistrationComponent }，]}]

我尝试过使用this.router.navigate"&引用很多链接.但它没有用.谁能告诉我我哪里出错了，或者如果你能给我一个工作样本会更好.

解决方案

@sasi.. 试试这样，

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

更新:

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

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

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

1. .forRoot(appRoutes) 用于应用级组件注册喜欢featuteModules(例如 UserManagement)和 components 您希望在 root 级别注册.

2. .forChild(featureRoutes)功能模块子组件(例如，UserDelete、UserUpdate).

   你可以像下面这样注册，

    const appRoutes: Routes = [{路径:'用户'，loadChildren:'./user/user.module#UserModule'}，{ 路径:英雄"，组件:HeroListComponent }，];@NgModule({进口:[浏览器模块，表单模块，RouterModule.forRoot(应用路由)],

<块引用>

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

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

<块引用>

routerLink 指令

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

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

如果你使用动态值来生成链接，你可以传递一个路径段的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:{用户ID:this.userId，用户名:this.userName}});

   您可以通过 ActivatedRoute 获取这些值 在导航组件中.你可以在这里查看更多关于 paramMap，snapshot(不可观察替代).

2. navigateByUrl()

   <块引用>

   根据提供的 URL 进行导航，该 URL 必须是绝对的.

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

   navigateByUrl() 类似于直接更改地址栏——我们提供的是整个新的 URL.

Im trying to redirect my page from login to another page. Im following this code.

My login component ts file:

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

constructor(private router: Router) {
}

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

In my html Im calling this function in a submit 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 },
    ]
   }
  ]

I have tried with "this.router.navigate" & referredlot of links. But it didnt work. Can anyone please tell me where Im going wrong or if you could give me a workingh sample it would be better.

解决方案

@sasi.. try like this,

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

Update :

In order to use the routing in your application, you must register the components which allows the angular router to render the view.

We need register our components in App Module or any Feature Module of it (your current working module) in order to route to specific component view.

We can register components in two ways

1. .forRoot(appRoutes) for app level component registration like featuteModules(ex. UserManagement) and components which you want register at root level.

2. .forChild(featureRoutes) for feature modules child components(Ex. UserDelete, UserUpdate).

   you can register something like below,

     const appRoutes: Routes = [
         { path: 'user', loadChildren: './user/user.module#UserModule' },
         { path: 'heroes', component: HeroListComponent },
      ];
   
     @NgModule({
       imports: [
       BrowserModule,
       FormsModule,
       RouterModule.forRoot(
         appRoutes
       )
     ],
   

P.S : In order to navigate from one component to another, you must include the RouterModule in corresponding Module Imports array from @angular/router package.

You can navigate one to another page in Angular in Two ways. (both are same at wrapper level but the implementation from our side bit diff so.)

routerLink directive

routerLink directive gives you absolute path match like navigateByUrl() of Router class.

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

If you use dynamic values to generate the link, you can pass an array of path segments, followed by the params for each segment.

For instance routerLink=['/team', teamId, 'user', userName, {details: true}] means that we want to generate a link to /team/11/user/bob;details=true.

There are some useful points to be remembered when we are using routerLink.

• If the first segment begins with /, the router will look up the route from the root of the app.
• If the first segment begins with ./, or doesn't begin with a slash, the router will instead look in the children of the current activated route.
• And if the first segment begins with ../, the router will go up one level.

for more info have look here.. routerLink

Router class

We need inject Router class into the component in order to use it's methods.

There more than two methods to navigate like navigate() , navigateByUrl(), and some other.. but we will mostly use these two.

1. navigate() :

   Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute.

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

   navigate() command will append the latest string is append to existing URL. We can also parse the queryParams from this method like below,

    this.router.navigate(['/team/'], {
       queryParams: { userId: this.userId, userName: this.userName }
    });
   

   You can get the these values with ActivatedRoute in navigated Component. you can check here more about paramMap, snapshot(no-observable alternative).

2. navigateByUrl()

   Navigate based on the provided URL, which must be absolute.

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

   navigateByUrl() is similar to changing the location bar directly–we are providing the whole new URL.

这篇关于如何导航到角度 6 中的其他页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！