使用 router.navigate 的角度路由

Question

我正在尝试从当前组件导航到另一个组件，如下所示：

this.router.navigate(['/relationshipInfo']);

上面的语句没有路由到不同的组件，下面是我在app-routing.module.ts中的代码：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {PersonalInfoComponent} from './PersonalInfo/PersonalInfo.component';
import {RequiredInfoComponent} from './RequiredInfo/RequiredInfo.component';
import {RelationshipInfoComponent} from './relationshipInfo/relationshipInfo.component'

const routes: Routes = [

  {path: 'PersonalInfo', component: PersonalInfoComponent},
  {
    path: '',
    children: [
      {path: 'RequiredInfo', component: RequiredInfoComponent},
      {path: 'RelationshipInfo', component: RelationshipInfoComponent},

  ]

  },

  {path: '**', redirectTo: 'PersonalInfo', pathMatch: 'full'},

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

下面是我的 app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PersonalInfoComponent } from './PersonalInfo/PersonalInfo.component';
import { MaterialModule } from './shared/Material.Module';
import { FormsModule } from '@angular/forms';
import { RequiredInfoComponent } from './RequiredInfo/RequiredInfo.component';
import { RelationshipInfoComponent } from './relationshipInfo/relationshipInfo.component';

@NgModule({
   declarations: [
      AppComponent,
      PersonalInfoComponent,
      RequiredInfoComponent,
      RelationshipInfoComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      MaterialModule,
      FormsModule
   ],
   providers: [],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

我正在尝试通过单击按钮进行路由。该按钮存在于 PersonalInfo 页面中。下面是 HTML 和 .ts 代码：

在线的

以下是我的 .ts 代码：

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

@Component({
  selector: 'app-PersonalInfo',
  templateUrl: './PersonalInfo.component.html',
  styleUrls: ['./PersonalInfo.component.css']
})
export class PersonalInfoComponent implements OnInit {
  public Loaded = false;
  public btnshow=true;
  constructor(private router:Router) { }

  ngOnInit() {
  }

  onlinePage(){
    this.router.navigate(['/RelationshipInfo']);
    this.router.navigateByUrl('/RelationshipInfo');
  }

  Continue()
  {
    //this.router.navigate(['/RequiredInfo']);
    this.router.navigateByUrl('/RequiredInfo');

  }

  Cancel(){}

}

任何帮助将不胜感激。

Answer 1

Angular 路由路径区分大小写。您将路线定义为：

{path: 'RelationshipInfo', component: RelationshipInfoComponent},

大写R 所以this.router.navigate 也应该大写R

this.router.navigate(['/RelationshipInfo']);