router navigate doesn't redirect to other page

问题

I would redirect user to another page when he clicks on a datatable row

In HTML

<p-table  [value]="users" selectionMode="single"  [(selection)]="selectedUser" dataKey="uid" (onRowSelect)="selectedUserDetails($event)" styleClass="tab-result">

in TS file

selectedUserDetails(userDetails) {
   console.log(userDetails);
   console.log("enterhere"); // is printed on console dev
   this.router.navigate['/userdetails'];
}

In module routing

const routes: Routes = [
  {
    path: "",
    component: AdministrationComponent,
    children: [
      { path: "", component: ResulTabComponent, pathMatch: "full" },
      { path: "userdetails", component: UserDisplayComponent }
    ]
  }
];

For information administration route is lazy loaded on this path http://localhost:4200/administration

userdetails should be http://localhost:4200/administration/userdetails

In administration component

<router-outlet></router-outlet>

My problem is that when clicking I don't get redirected to the userdetails page but when I navigate to /userdails from url bar I see the component

回答1:

You have not called the function, you just try to access a property with name /userdetails in the navigate property. You missed ()

this.router.navigate(['/userdetails']);
                    ^                ^

回答2:

add parentheses "()" and remove slash "/"

this.router.navigate(['userdetails']);

try routing like below:

const routes: Routes = [
  { path: '', component: ResulTabComponent },
  { path: "administration/userdetails", component: UserDisplayComponent }
]

来源：https://stackoverflow.com/questions/50740767/router-navigate-doesnt-redirect-to-other-page

标签

angular

typescript

angular-routing