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>

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 }
];

谢谢，我认为，我将分享此路由部分的所有情况。祝您编码愉快！

Answer 3

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

您也可以使用导航，不需要前导/，但是语法略有不同，因为它期望路径包含数组

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

Answer 4

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

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

4 个答案: