html - 如何导航到 Angular 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”和引用的链接。但它没有用。任何人都可以告诉我我哪里出错了，或者如果你能给我一个工作样本会更好。

Answer 1

@sasi.. 像这样尝试，

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

更新:

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

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

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

1. .forRoot(appRoutes)用于应用程序级别的组件注册，例如 featuteModules(例如 UserManagement)和 components，您希望在 root level 注册。

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

   你可以像下面这样注册，

     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.

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

routerLink directive

routerLink 指令为您提供绝对路径匹配，例如 RouternavigateByUrl() > 类。

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

如果您使用动态值生成链接，您可以传递路径段的数组，然后是每个段的params .

例如 routerLink=['/team', teamId, 'user', userName, {details: true}] 表示我们要生成一个链接到/team/11/user/bob;details=true .

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

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

更多信息请看这里.. routerLink

Router class

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

有两种以上的导航方法，例如 navigate() 、navigateByUrl() 和其他一些方法。但我们将主要使用这两种方法。

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() 命令会将最新的字符串附加到现有 URL。我们还可以像下面这样从这个方法中解析queryParams，

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

   您可以使用 ActivatedRoute 获取这些值 在导航组件中。您可以在这里查看更多关于 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() 类似于直接更改地址栏——我们提供完整新 URL。

   <