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

Question

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

我的登录组件ts文件：

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

constructor(private router: Router) {
}

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

在我的html中，我在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 },
    ]
   }
  ]

我已经尝试过“ this.router.navigate”和链接的referlot。但是它没有用。任何人都可以告诉我我哪里出错了，或者如果您可以给我一个工作样本，那会更好。

Answer 1

@sasi ..像这样尝试，

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

更新：

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

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

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

1. .forRoot(appRoutes)用于应用级别组件的注册，例如 featuteModules（例如UserManagement），components并且您希望在上注册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：为了从一个组件导航到另一个组件，您必须RouterModule在@angular/router包中的相应Module Imports数组中包括。

您可以通过两种方式在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在导航的Component中获得这些值。您可以点击这里详细了解paramMap，snapshot(no-observable alternative)。

2. navigateByUrl()

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

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

   navigateByUrl()类似于直接更改位置栏-我们将提供完整的新URL。

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.然后打开your.component.html文件，然后触发一种方法来导航到您想去的地方

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

3.然后将your.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 }
];

谢谢，我想我将分享此路由部分的所有情况。快乐编码！