angular маршрутизация с использованием 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:

Online

, а ниже - мой код .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']);