Question

我正在Angular 5中开发一个小项目，我在代码中进行了路由器配置。单击按钮，我希望当前视图导航到下一个视图。该网址将更改为第二个视图网址，但该视图不会更改。它甚至没有显示任何错误。这就是我所做的。 app.module.ts中的导入：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { FormControl } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';


import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { PageNotFondComponent } from './page-not-fond/page-not-
fond.component';


const appRoutes: Routes = [
{ path: 'register', component: RegisterComponent },
{ path: 'login', component: LoginComponent },
{ path: 'home', component: AppComponent },

{ path: '',   redirectTo: '/home', pathMatch: 'full' },
{ path: '**', component: PageNotFondComponent }
];

@NgModule({
declarations: [
AppComponent,
LoginComponent,
RegisterComponent,
PageNotFondComponent

],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(
 appRoutes,
 { enableTracing: true } // <-- debugging purposes only

)
],
exports: [ RouterModule ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html代码：

<button class='btn' routerLink="/register" (click)="goToRegisterPage()"> 
Register</button>

app.component.ts代码：

import { Component } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
constructor(
private router: Router) { }

goToRegisterPage(){
  this.router.navigate(['register']);
}

}

Answer 1

尝试以下它适用于我，

用于访问以下提到的路径

{ path: 'login', component: LoginComponent },

转到此页面的视图并尝试此

<a [routerLink]="['login']">Login</a>

并在控制器中

import {Router} from '@angular/router'

Angular 5中的路由和导航

1 个答案: